Change the product style of “Standard Button”

I want to change the product style/archive of “Standard Button”

First I would like the content to be aligned to the left, second I would like the category to be first and then the title, and third I would like the button to have a border around it with no background and the hover to remain with a colored background. Can you help me?

Thank You!

Hello adrianaliv.diseno,

Thanks for reaching to us.

1. I see the content are aligned to left, please let me know if you resolved it.

2. Categories order

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

.wd-product .wd-product-cats {
	order: 1;
}

.wd-product .wd-entities-title {
	order: 2;
}

.wd-product span.price {
	order: 3;
}

3. Button

If you want to have no background color then which color you want to change for text to make it visible?

Regards,

Your code worked but not correctly, since the button now appears first and I would like it to stay at the end, as it was, I want this order:

category, title, price, button.

And the text aligned to the left is no longer working, I don’t know if you could help me with that,

about the button, I would like it to be like the attached image, the orange color would be: #F1684B

Attachments:

You must be logged in to view attached files.

Hi,

To change the product design according to your preferences, please follow these steps:

1. Remove the custom code provided in the previous message.
2. Add the following code to the Global Custom CSS area located in Theme Settings.

.wd-hover-standard .product-wrapper {
	text-align: left;
	--text-align: left;
}

.wd-hover-standard .product-wrapper > .product-element-top {
	order: 0;
}

.wd-hover-standard .product-wrapper > .wd-product-cats {
	order: 1;
}

.wd-hover-standard .product-wrapper > * {
	order: 2;
}

.wd-product.wd-hover-standard .wd-add-btn > a {
	border: 1px solid var(--btn-accented-bgcolor);
}

.wd-product.wd-hover-standard .wd-add-btn > a:not(:hover) {
	background: transparent;
	color: var(--btn-accented-bgcolor);
}

.wd-product.wd-hover-standard .wd-add-btn > a:hover {
	border-color: var(--btn-accented-bgcolor-hover);
}

By default, the product button color matches the accent buttons color, which is set in Theme Settings → Styles and Colors → Buttons. If, for any reason, you want the product button color to be different from others, add the following code to Global Custom CSS, making sure to specify your own colors for the idle and hover states of the button.

.wd-product.wd-hover-standard .wd-add-btn > a {
    --btn-accented-bgcolor: green;
    --btn-accented-bgcolor-hover: red;
}

The category is not displayed as I want, it is the same as the theme design, please I want it to be CATEGORY > TITLE > PRICE > BUTTON.

Hello,

Try to replace the previous code with the following code:

.wd-hover-standard .product-wrapper {
	text-align: left;
	--text-align: left;
}

.wd-hover-standard .product-wrapper  > .product-element-bottom > .wd-product-cats {
	order: 0;
}

.wd-hover-standard .product-wrapper > .product-element-bottom > * {
	order: 1;
}

.wd-product.wd-hover-standard .wd-add-btn > a {
	border: 1px solid var(--btn-accented-bgcolor);
}

.wd-product.wd-hover-standard .wd-add-btn > a:not(:hover) {
	background: transparent;
	color: var(--btn-accented-bgcolor);
}

.wd-product.wd-hover-standard .wd-add-btn > a:hover {
	border-color: var(--btn-accented-bgcolor-hover);
}

Kind Regards

thank you

You are welcome!

[Author]

Posts