Shopping cart button -> wide

Hi,

I am looking for a way to customize the shopping cart button on 2 pages in mobile view.
The field should be stretched to the full width.

How can I solve this?

Thanks a lot for your help.
Attached screenshots and links.

Attachments:

You must be logged in to view attached files.

Image 2

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

@media (max-width: 1024px) {
body .wd-quantity-enabled .woodmart-hover-quick:not(.sold-individually) .product_type_simple {
	width: 100%;
}	
body .woodmart-hover-quick .woodmart-add-btn div.quantity {
    left: auto;
    right: 0;
}
body	.wd-add-btn-replace .add-to-cart-loop:before {
		right: auto;
		left: 15px
	}
}
@media (max-width: 768px) {
	.product-image-summary .cart {
		display: flex;
	}
	.product-image-summary .single_add_to_cart_button {
		flex-grow: 1;
	}
}

1024 width is for the product grid, and 768 is for a single product.

Best Regards

Hey,

that’s already very good. Almost perfect.
Can you still center the shopping cart for me?
That would be perfect.

Thank you for your help.

And while we’re at it, can you tell me why the word “GELATIN FREE” is broken off in the picture?

So the property? What can I do about it?

Andreas

Hello,

Please provide the screen and page URL for And while we’re at it, can you tell me why the word “GELATIN FREE” is broken off in the picture?

What do you mean? Can you still center the shopping cart for me? If you mean the button on the product page, it is not possible to center one button, product count would be also centered.

Best Regards

Hey, sorry, I didn’t see your message at all.

I have attached once again a screenshot. There I mean the word “GELATINEFREI” there is the “I” on the next time. This is also only on the mobile version.

And then I meant at the button, if the cart can also slide to the center?

That would be great.
Thank you.

Greetings
Andreas

Attachments:

You must be logged in to view attached files.

Hello,

The only way is to reduce the font:

media (max-width: 575px){
.labels-rectangular .product-label {
    font-size: 8px;
}
}

Please check if it is workable for you.

Best Regards

Thank you very much!
There seems to be something wrong.
I’m adding it to Custom CSS, aren’t I? In “Global Custom CSS”?
It doesn’t do anything there, and also the line: “.labels-rectangular .product-label” is red. It’s not like that with the other items.

I have found the error. In the code above, an @ was missing.
Now it fits.

Thanks for your help.

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts