Change buttons

Hi,

Is it possible to change the buttons into different ones trought CSS? Please look at the picture.
There is allready a rounded one, but closed with background. Is there a button, wich is rounded frame, en when hover closed frame.

Another question. How can i change the size of the sub-category? They are very big, and not nice on top of each other. See the picture

Thanks you.

Attachments:

You must be logged in to view attached files.

Hi,

1. Not all buttons can be changed in the same way. Please, list the specific buttons you want to change first.
2. We have checked your categories and they are looking normal (https://prnt.sc/M0txQX1HWb31).

Kind Regards

Hi,

I really like the woodmart theme. I like all of the many options i can choose.

1. The “add to cart” buttons from the productspage and the singlepage.
2. I did see the size change of the category thumbs. I think its when category style is changed.

3. I like the hover option with additional options, but when you use LIST instead of GRID, all of the additional options are shown in list. Is there a way to choose some of this options?

4. Is there also a way to make the lineheight of a LIST smaller?

1. Try to add the following code snippet to the Custom CSS area in Theme Settings to change the button on a single product.

.summary-inner .single_add_to_cart_button {
	background-color: transparent;
	border: 2px solid var(--btn-shop-bgcolor);
	color: color: var(--wd-form-color);
	padding-top: 10px;
	padding-bottom: 10px;
	color: var(--btn-shop-bgcolor);
}

.summary-inner .single_add_to_cart_button:hover {
	border-color: var(--btn-shop-bgcolor-hover);
}

.summary-inner .single_add_to_cart_button.loading {
	background-color: var(--btn-shop-bgcolor-hover);
	border-color: var(--btn-shop-bgcolor-hover);
}

3, 4. Please, explain these issues in more detail, attach some screenshots. Which additional options and line-height do you mean.

Kind Regards

Hi, your code is almost doing the thing. I have added “background-color: var(–btn-shop-bgcolor-hover);” on hover. Only text should turn white or a lighter color. I tried to change the color under “styles and color”, but didnt work. It only works on the single-page, and not on shop-page. Can this also be done on shoppage?

Please take a look at http://www.plafondhandel.nl

3. When on productstyles under “elements” the hover content is set on “additional information”. If LIST is set on “productsgrid”, the full additional information is given in the list-line. Also button is getting different the on “grid”. See picture #3.

4. When having products set on “list”, is there a way to make the product-line smaller? Maybe when setting a smaller image? See picture #4.

Thanks allready for your help.

Attachments:

You must be logged in to view attached files.

Forget one question, can i get rid of the capitalized text? Tried “typography” allerady, but nothing changed…

1. Replace previous custom code with this one

.summary-inner .single_add_to_cart_button {
	background-color: transparent;
	border: 2px solid var(--btn-shop-bgcolor);
	color: color: var(--wd-form-color);
	padding-top: 10px;
	padding-bottom: 10px;
	color: var(--btn-shop-bgcolor);
}

.summary-inner .single_add_to_cart_button:hover {
	border-color: var(--btn-shop-bgcolor-hover);
	color: #FFF
}

.summary-inner .single_add_to_cart_button.loading {
	background-color: var(--btn-shop-bgcolor-hover);
	border-color: var(--btn-shop-bgcolor-hover);
}

3. There are no options to choose a specific attribute for product hover. If you choose to show attributes on product hover it will display all current product attributes.

4. Height of the product list hover depends on the product picture aspect ratio and on the product description size in the right column. Product image aspect ratio depends on woocommerce product image settings and cannot be different from one product hover to another.

5. You have manually entered the name of the product using capitalize style (https://prnt.sc/rI4PDRynNdgy). This cannot be overwritten via CSS or typograpty settings. In this case, you need to manually change the product name end remove capitalize letters.

Kind Regards

This button works nice. Is it possible to also show it also on the product-page on the producttiles?

I meant the capitalize styled text for “ADD TO CART” or on the category headlines. How to uncapitalize them.

Attachments:

You must be logged in to view attached files.

Hi,

Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

body .wd-hover-base .wd-bottom-actions:not(.wd-add-small-btn) .wd-add-btn>a {
	background-color: transparent;
	border: 2px solid var(--btn-shop-bgcolor);
	color: color: var(--wd-form-color);
	color: var(--btn-shop-bgcolor);
}

body .wd-hover-base .wd-bottom-actions:not(.wd-add-small-btn) .wd-add-btn>a:hover {
	border-color: var(--btn-shop-bgcolor-hover);
	color: #FFF
}

body .wd-hover-base .wd-bottom-actions:not(.wd-add-small-btn) .wd-add-btn>a.loading {
	background-color: var(--btn-shop-bgcolor-hover);
	border-color: var(--btn-shop-bgcolor-hover);
}

body .category-grid-item .wd-entities-title {
	text-transform: none;
}

Kind Regards

Works fine. Many thanks.

Most of the capitalized texts are normal. Only the “add to cart” or in dutch “toevoegen aan winkelwagen” are stil capitalized. Is this a Woocommerce setting?

Also the “add to cart” button is gone on the productpage, please look at:
https://plafondhandel.nl/product-categorie/plafondplaten/armstrong/feria/

On frontpage its still there on the poduct tiles, but when clicking through the subcategories, the “add to cart” button is gone. I also looked if its from the added code, but when the code is removed its still not there. Also maybe a setting trough the theme? There are so many settings, but thats what i like about this theme.

Hi,

Try to use following custom code to remove uppercase from add to cart buttons:

body .single_add_to_cart_button,
.wd-hover-base .wd-bottom-actions:not(.wd-add-small-btn) .wd-add-btn>a {
	text-transform: none;
}

To save space on small columns width product hover design “Show summary on hover”, that you have chosen, is replacing the button with a small icon if on shop page you choose 4 columns or larger.

2-3 columns – button (https://prnt.sc/PUd3y-LWc9Vw)
4-5-6 columns – icon (https://prnt.sc/7Xky5amDRREi)

This behavior can’t be changed via option or custom CSS.

Kind Regards

HI, thanks for answering all my questions. Many thanks, as i couldn’t realise all these codes.

I’m out of questions. Thank you.

Best Regards,
Jeroen

You are welcome!

[Author]

Posts