Mixing two hover effects in products style in one?

hello,
I am trying to use the tiled hover effect but I also need to add the standard button where you can choose the amount of the same product on the shop page.

is it possible to add that this this class .woodmart-add-btn wd-add-btn-replace to the tiled effect I just need the button. or can I do the opposite add the box in the tiled hover effect to the standard button effect?

also is there a way to allow customers to change the amount of the products in the cart inside the cart sidebar?

thank you.

Hello,

Please find this file woodmart/woocommerce/content-product-tiled.php

Copy this file in the same route into the child theme.

Add this code as shown on the screen: http://prntscr.com/utbc0i

Please add this code to the Theme Settings > Custom CSS > Global:

.woodmart-hover-tiled div.quantity {
	margin-top: 5px;
	margin-bottom: 5px;
}
.woodmart-hover-tiled div.quantity input[type=button],
.woodmart-hover-tiled div.quantity input[type=number] {
	height: 30px;
}

Please add this code to the Theme Settings > Custom JS > On document ready:

jQuery('.product-grid-item').on('change input', '.quantity .qty', function() {
	var add_to_cart_button = jQuery(this).parents('.product-grid-item').find('.add_to_cart_button');
	// For AJAX add-to-cart actions.
	add_to_cart_button.attr('data-quantity', jQuery(this).val());
	// For non-AJAX add-to-cart actions.
	add_to_cart_button.attr('href', '?add-to-cart=' + add_to_cart_button.attr("data-product_id") + '&quantity=' + jQuery(this).val());
});

In order to add quantity to the shopping cart, you need enable the option in the Theme Settings > Shop http://prntscr.com/utbb8j

Best Regards

Thank you very much it worked but one small issue the add to cart button is still on top I wanted to add it next to the product amount as you can see here also is there a way to center the description and the price?

one more question, I found a code on the forum for making the shop page full width with content (only shop page) its working fine but when I press on shop page but whenever I press on any category it goes back to other width

how can I make the whole shop page with categories same width I need the full width with content?

thank you

this is what happened with the product > https://imgur.com/DpuWeSJ

and this is the width of the page > https://imgur.com/QHcj3Sq , https://imgur.com/VU7qVGn

Hello,

Please find the file woocommerce/content-product-tiled.php

Move the price line as shown on the screen: http://prntscr.com/uukciy

Please remove this custom CSS: https://prnt.sc/uuktw7

Then add this custom CSS:

.product-element-bottom {
  text-align: center;
}
@media (min-width: 1025px) {
	
.post-type-archive-product .container,
.tax-product_cat .container {
    width: 95%;
    max-width: 95%;
}
}

Best Regards

Thank you the second one worked perfectly but the first one still the samel, I moved the code and its exactly as in the picture but still it only shows the amount of products no add to cart button like the standard style.

Hello,

Please provide more details on how you would like it be. Please provide the screen of what it is now and what you would like to change.

Best Regards

Here is how I want it to be > https://pasteboard.co/JuAEqsBu.png
something like this > https://pasteboard.co/JuAEFSW.png this one is the standard button style (can I add box from tiled style to this?)

but I need the box from the tiled style (products are in boxes) > https://pasteboard.co/JuAFeVF.png

also is there a way to redirect Home to shop main page instead of home page? > https://pasteboard.co/JuAEZnU.png

Hello,

In order to reach the appearance, you need to switch to the Standard buttons hover design;

Then remove the quantity option in the child theme: copy the file content-product-tiled.php into the child theme in this route: woodmart/woocommerce/content-product-standard.php

Add the code as shown on the screen:

http://prntscr.com/uvb3ug

http://prntscr.com/uvb3yg

Then add this custom:

.woodmart-hover-standard .product-wrapper {
  box-shadow: 0 0 4px rgba(0,0,0,.12);
  padding: 0 20px 15px 20px;
}
.woodmart-hover-standard .product-wrapper .product-element-top {
  margin-left: -20px;
  margin-right: -20px;
}

Best Regards

Thank you so much Elise worked fine!

hopefully those are last 2 questions

is it possible to add text here in the shop page (in the place of breadcrumbs) > https://pasteboard.co/JuGQ6Lv.png

is there a way to redirect home button (on single product page breadcrumbs) to shop main page instead of home page? https://pasteboard.co/JuAEZnU.png

Hello,

In order to add a custom text or any other content:

1. Enable Top filters in the Theme Settings > Shop > Shop filters https://gyazo.com/3564df2a5d658a0010b6c0ebd0b537d4

2. Enable Shop filters area always opened

3. Shop filters content type should be set Custom content

4. You can choose the HTML block with the content from the Shop filters custom content drop-down.

As for the breadcrumbs – unfortunately, it is not possible even with the customization.

Best Regards

[Author]

Posts