Change the product style of “Standard Button”

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,

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

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

You are welcome!