Home › Forums › WoodMart support forum › Change the product style of “Standard Button”
Change the product style of “Standard Button”
- This topic has 5 replies, 3 voices, and was last updated 33 minutes ago by Bogdan Donovan.
-
AuthorPosts
-
October 22, 2024 at 3:30 am #606637
adrianaliv.disenoParticipantI 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 PhamKeymasterHello 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.disenoParticipantYour 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 DonovanKeymasterHi,
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.disenoParticipantThe 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 DonovanKeymasterHello,
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
-
AuthorPosts
Tagged: category, reordering, title
- You must be logged in to create new topics. Login / Register