[Support request] Change shop archive layout

Home Forums Support [Support request] Change shop archive layout

Home Forums Support Change shop archive layout

Viewing 5 posts - 16 through 20 (of 20 total)
  • Author
    Posts
  • #2021258
    David
    Staff
    Customer Support
    #2021286
    nik9

    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?

    Cheers

    #2021317
    David
    Staff
    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%;
    }
    #2022005
    nik9

    Cool!

    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?

    Cheers

    #2023217
    David
    Staff
    Customer Support

    Hmmm…

    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:

    a.button.add_to_cart_button.ajax_add_to_cart::before

    to

    a.button.add_to_cart_button.ajax_add_to_cart::after

    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.