Wish button

Hello,

How to “add wish button” next to “add to cart “button?

I need “button” but icon with text. like this.

Attachments:

You must be logged in to view attached files.

Hello,

Could you kindly clarify the place where you want to add this button? Please consider WooCommerce layouts builder : https://xtemos.com/docs-cat/woocommerce-layouts-builder/?theme=woodmart

If you have any questions please feel free to contact us.

Best Regards

Hello,

I’m editing Dashboard >> Layouts >> Single Product layout with Elementor, and created a section has two
columns. “add to cart button” on the left side, “add to wishlist button” on right side.

I need the “wish button” that in same shape as “add to cart button”. currently, it is displayed only icon and text like ” ♡WISH”.

Attachments:

You must be logged in to view attached files.

Hello,

You need to change the width of the columns as per your needs in the same way as you do with the content on pages or posts.

If you have any questions please feel free to contact us.

Best Regards

Hello,

It’s not about column width but I need the same shape button as the “add to cart button”.

I need the Text on Button.

Attachments:

You must be logged in to view attached files.

I drew the button I need. ( ↑ screenshot)

Hello,

Please provide the page URL and check if it is possible to do it with custom CSS.

Best Regards

Hello,

Here’s our site URL 😉

Hello,

You need to delete duplicated button and add this custom CSS:

.wd-action-btn.wd-style-text>a {
    font-size: 13px;
    line-height: 18px;
    border-radius:35px;
    color: white;
    box-shadow: var(--btn-shop-box-shadow);
    background-color: var(--btn-shop-bgcolor);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    outline: none
    box-shadow: none;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: none;
    font-weight: 600;
    cursor: pointer;
    transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease, opacity .25s ease;
	width:157px;
}
.wd-action-btn.wd-style-text>a:hover {
    font-size: 13px;
    line-height: 18px;
    border-radius:35px;
    color: white;
    box-shadow: var(--btn-shop-box-shadow);
    background-color: rgb(1,140,18);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    outline: none
    box-shadow: none;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: none;
    font-weight: 600;
    cursor: pointer;
    transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease, opacity .25s ease;
	width:157px;
}

Best Regards

Hello,

I delete the wish button and added the code, but nothing shows up.

Could you please check my admin panel??

Hello,

Now I do not see a wishlist icon at all: https://gyazo.com/fe2e592e303f39c28311fd38639275fe

Please clarify.

If you have any questions please feel free to contact us.

Best Regards

Hello,

I re-added wish button. is it possible to make the wish button in same size as cart button??

and I need to display the wish button next to cart button.

Hello,

Please replace the code provided above with this one:

.wd-action-btn.wd-style-text>a {
	  padding:12px;
    border-radius:35px;
    color: white;
    box-shadow: var(--btn-shop-box-shadow);
    background-color: var(--btn-shop-bgcolor);
}
.wd-action-btn.wd-style-text>a:hover {
		padding:12px;
    border-radius:35px;
    color: white;
    box-shadow: var(--btn-shop-box-shadow);
    background-color: rgb(1,140,18);
}

Best Regards

Hello,

The shape is perfect! Thank you 😉

I have one more request. How to display the wish button next to cart button?? (height )

the height seems different depending on whether there’s an option or not.

1st one has option, 2nd one has no option (screenshot)

Attachments:

You must be logged in to view attached files.

2nd one is here

Attachments:

You must be logged in to view attached files.

Hello,

You need to add margins to the wishlist button or configure the column to show the content at the bottom https://gyazo.com/6cdc626dd5291b72c5c22e7e6cc20b1d and then correct it with margins.

If you have any questions please feel free to contact us.

Best Regards

Hello,

Thank you!

now the height solved 😉
I have another issue, I need to be same the space in the wish button as cart button.
how to reduce the space??

Attachments:

You must be logged in to view attached files.

Hello,

Please replace the code with this one:

.wd-action-btn.wd-style-text>a {
	  padding:12px 0;
    border-radius:35px;
    color: white;
    box-shadow: var(--btn-shop-box-shadow);
    background-color: var(--btn-shop-bgcolor);
	  width:118px!important;
}
.wd-action-btn.wd-style-text>a:hover {
		padding:12px 0;
    border-radius:35px;
    color: white;
    box-shadow: var(--btn-shop-box-shadow);
    background-color: rgb(1,140,18);
	  width:118px!important;
}

Best Regards

Hello,

Thank you for your support!
That all issue solved!

I appreciate your your help so much! 😉

You are welcome! We are here to help.

Wish you a wonderful day!

[Author]

Posts