Add YITH add to quote

Hi Support

I would like to include an add to quote button to product to the shop page as well – Products without the ‘add to cart’ button displays the add to quote button.

I would also like to stylize this in the same way the way as the “add to cart” button.

How can I integrate this?

Attachments:

You must be logged in to view attached files.

Hello,

Could you please send us a link to your shop page where we can see how it looks now?

Thank you in advance.

HI

Please visit the link in the private content below:

Hi,

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

body .product-grid-item .btn-add > a:not(.add_to_cart_button),
body .product-grid-item .btn-add > a:not(.product_type_variable) {
	display: none;
}

body .product-grid-item .yith-ywraq-add-to-quote .button {
		position: relative;
    background-color: transparent;
    border: none;
    padding: 0;
    padding-left: 22px;
    color: #000;
    white-space: nowrap;
    font-weight: 700;
    text-transform: none;
}

body .product-grid-item .yith-ywraq-add-to-quote .button:hover {
	color: #333333;
	background-color: transparent;
}

body .product-grid-item .yith-ywraq-add-to-quote .button:before {
		display: inline-block;
    position: absolute;
    line-height: 18px;
    font-size: 16px;
    font-family: simple-line-icons;
    content: "\e04e";
    left: 0;
    top: -1px;
}

Regards

Hi Bogdan

Thanks for the above code, I have added this to the Custom CSS and it is working.

I would like this option AND the Add to cart option as well – not just to replace it.

Thanks,

Try to replace the previous snippet with this one to apply styles only to the plugin button.

body .product-grid-item .yith-ywraq-add-to-quote .button {
    position: relative;
    background-color: transparent;
    border: none;
    padding: 0;
    padding-left: 22px;
    color: #000;
    white-space: nowrap;
    font-weight: 700;
    text-transform: none;
}

body .product-grid-item .yith-ywraq-add-to-quote .button:hover {
	color: #333333;
	background-color: transparent;
}

body .product-grid-item .yith-ywraq-add-to-quote .button:before {
    display: inline-block;
    position: absolute;
    line-height: 18px;
    font-size: 16px;
    font-family: simple-line-icons;
    content: "\e04e";
    left: 0;
    top: -1px;
}

Regards

Perfect – the styles are the same.

Is there no way to add BOTH buttons on the shop page?

Thanks

Dilosen

Attachments:

You must be logged in to view attached files.

Sorry, but what do you mean by saying both buttons? Last styles that we provided didn’t add or remove any buttons and only changes button styles of the “add to quote” plugin on the shop page.

For now, add to cart button didn’t show up apparently because of some plugin setting.

Regards

Hi Bogdan –

I would like to show the add to cart and add to quote button on the shop page. Currently, the shop page has the add to cart whilst the code you sent before replaced the add to cart with the add to quote button.

Ideally, I would like to have the add to cart and add to quote button display in the same style.

Thank you for the same styling as this is perfect to match the website look.

The last CSS styles that we provided were applied only for Add to quote button and did not change the add to cart button or any other button. If you temporarily remove our CSS code you can see that.

For now, there is no other button on product page besides Read More and Add to Quote. It can be seen by checking the dev tools https://prnt.sc/igtwb5. Furthermore, there is no Price and Add to cart button on your single product page. Perhaps this is caused by a 100% discount that is applied to all products. You need to check your Woocommerce or Add to Quote Plugin settings.

Regards

Hi Bogdan

Yes, Thank you for the CSS which is effective. You are seeing no price as you are not a logged/registered user. Logged in users will see the attached screenshot.

What I am asking is to display BOTH the Add to Quote button AND the Add to Cart button as we would like the customer to have both the add to quote and add to cart options available.

Currently it’s set to either or – is there no way to have both buttons displayed?

Thanks

Attachments:

You must be logged in to view attached files.

Please, provide us your admin access so we can login and check this on your side.

Thank you in advance.

Hi Bogdan, please use the below private details

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

body .basel-hover-alt.purchasable .wrapp-swap {
	overflow: visible;
}

body .basel-hover-alt.purchasable .wrapp-swap {
	height: auto;
}

body .basel-hover-alt.purchasable:hover .swap-elements {
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -o-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -sand-transform: translateY(0px);
}

body .basel-hover-alt .star-rating {
	display: block;
}

body .basel-hover-alt .wrap-price .btn-add, 
body .basel-hover-alt .wrap-price .price, 
body .basel-hover-alt .wrap-price .wrapp-swap {
	height: auto;
	line-height: 28px;
}

Regards

Yes! Perfect! This is exactly what I need.

Please can you tell me how to change the shopping basket icon for “Add to Quote” to something else?

Attachments:

You must be logged in to view attached files.

Thanks, pardon my ignorance, but what code will I insert?

I would like to use this one: https://fontawesome.com/v4.7.0/icon/plus-circle/

Thanks

Sorry for misunderstanding it was a wrong list.

You need to choose icon from this list http://simplelineicons.com/ and we’ll tell you what string need to be replaced

Regards

I would like to use the Plus icon : .icon-plus

You will need to find this part of code in your Custom CSS which we give you before

body .product-grid-item .yith-ywraq-add-to-quote .button:before {
    display: inline-block;
    position: absolute;
    line-height: 18px;
    font-size: 16px;
    font-family: simple-line-icons;
    content: "\e04e";
    left: 0;
    top: -1px;
}

and replace this string content: "\e04e"; to this content: "\e095";

Regards

Perfecto! Thanks!

Out of interest, how do you find the following: “\e095”;

Thanks a lot, the site is looking great!

Attachments:

You must be logged in to view attached files.

It can be found in font CSS file by using GitHub repository https://github.com/thesabbir/simple-line-icons/blob/master/css/simple-line-icons.css or using browser dev tools on font site https://prnt.sc/igyays.

You are welcome

Hi Bogdan – I need some help with something else related to the “Read More” link

I would like to change the text “Read More” and the link as well – I would like to replace this text to “Register to view Price” and the link to the Registration page url. If you could direct me or send me the code snippet regarding this, I can do these changes on my side.

I have inspected the element, but I would like to do this site wide and am unfamiliar with the code base.

Thanks

Attachments:

You must be logged in to view attached files.

You can translate all theme and plugin texts via PO file in WordPress. Here is a video tutorial that should help you translate your website texts with a Loco Translate plugin https://www.youtube.com/watch?v=tAFq1yTfWfU
This button text comes with WooCommerce so you will need to edit the plugin’s PO file to change it.

Hi Artem, Sorry – I wish not to translate using loco but instead replace the function and text of the Read More button to Register Button and to change the link as well.

Users who are not logged in will then be able to click this button and register an account instead of previewing the product.

Hi,

It may require some PHP template customization. Here is an article that should help you https://www.pootlepress.com/2014/10/replace-add-to-cart-button-woocommerce-shop-page/

Regards

Thanks for the guide this will help me replace the button function. I wanted to ask if there is a difference in the Read More button when a user is logged out vs. a user logged in?

Our site has a setting that does not show a price for logged out users. The default replacement button from the Basel theme/Woocommerce is “Read More” which redirects to the product page.

I would like to clarify the function of this button so that it does not affect any other “Read More” buttons on the website.

This button functionality comes with WooCommerce plugin so we don’t know exactly if it has some difference when a user is logged out vs. a user logged in.

But it shouldn’t influence any other buttons.

[Author]

Posts