Change buttons

This topic has 12 replies, 2 voices, and was last updated 2 years, 8 months ago by Bogdan Donovan.

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

Author

Posts
March 14, 2022 at 4:46 pm #360727

wolly
Participant

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.

March 15, 2022 at 8:20 am #360880

Bogdan Donovan
Keymaster

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

March 15, 2022 at 7:46 pm #361125

wolly
Participant

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?

March 16, 2022 at 1:07 pm #361364
Bogdan Donovan
Keymaster
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
March 17, 2022 at 6:39 pm #361788

wolly
Participant

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.

March 17, 2022 at 6:47 pm #361791

wolly
Participant

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

March 18, 2022 at 11:33 am #362015
Bogdan Donovan
Keymaster
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
March 18, 2022 at 5:25 pm #362154

wolly
Participant

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.

March 21, 2022 at 7:28 am #362554
Bogdan Donovan
Keymaster
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
March 22, 2022 at 4:59 pm #363135

wolly
Participant

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.

March 23, 2022 at 9:52 am #363309
Bogdan Donovan
Keymaster
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
March 24, 2022 at 5:57 pm #363799

wolly
Participant

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

March 25, 2022 at 8:37 am #363935

Bogdan Donovan
Keymaster

You are welcome!
Author

Posts