[Support request] Change shop archive layout

[David]

Glad to hear that!

[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

[David]

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%;
}

[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

[David]

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.

[Author]

Posts