Black Friday! Get up to 25% off GP Premium! Learn more ➝

[Support request] Change shop archive layout

Home Forums Support [Support request] Change shop archive layout

Home Forums Support Change shop archive layout

  • This topic has 19 replies, 3 voices, and was last updated 1 year ago by David.
Viewing 5 posts - 16 through 20 (of 20 total)
  • Author
  • #2021258
    Customer Support

    Thanks Dave!

    On last thing I think.

    Currently, when a product name is longer and needs two line space, then all other product in the same row have the same height. This is nice. But we want, that the title always is on the first line and when a product in the row need more pace for the title denn just add space to the other in order that the price, stars and add to cart is always in the same level.

    With the CSS below, i can adjust the length of the tite. But this is not that what we want.

    .archive h2.woocommerce-loop-product__title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

    Do we have to adjust our wrapper for this?


    Customer Support

    Most of the elements have auto margins, so you should just need to make the woo-content-wrap into a flex column like so:

    .woo-content-wrap {
        display: flex;
        flex-direction: column;
        height: 100%;


    I also saw now that after add to dart the success sign is outside of the button. Can we change the icon after add to cart inside the add to cart button and hide the GP sign?


    Customer Support


    so this is your CSS:

    a.button.add_to_cart_button.ajax_add_to_cart::before {
        content: "\f07a";
        font-family: 'FontAwesome';
        font-size: 15px;
        padding: 7px 12px 7px 12px;
        color: white;
        background: #333;
        border-radius: 5px;

    It adds the icon to the :before pseudo element.

    When you add to Cart woo outputs this :after pseudo element

    .woocommerce #respond input#submit.added::after, .woocommerce a.button.added::after, .woocommerce button.button.added::after, .woocommerce input.button.added::after {
        font-family: WooCommerce;
        content: "\e017";
        margin-left: .53em;
        vertical-align: bottom;

    So a simple option in YOUR CSS would be to change:




    That way the icon will get swapped.

Viewing 5 posts - 16 through 20 (of 20 total)
  • You must be logged in to reply to this topic.