Change the product style of “Standard Button”

This topic has 5 replies, 3 voices, and was last updated 3 hours, 6 minutes ago by Bogdan Donovan.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
October 22, 2024 at 3:30 am #606637

adrianaliv.diseno
Participant

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!

October 22, 2024 at 1:33 pm #606772
Hung Pham
Keymaster
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,
October 23, 2024 at 8:24 am #606950

adrianaliv.diseno
Participant

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.

October 23, 2024 at 10:56 am #607008
Bogdan Donovan
Keymaster
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;
}
```
November 5, 2024 at 7:50 am #609917

adrianaliv.diseno
Participant

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.

November 5, 2024 at 10:33 am #609942
Bogdan Donovan
Keymaster
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
Author

Posts