Additional Button on Product Loop with Link to related Product Variation

Hello,

I need your help to achieve the following:

On Product Loop I want to have 2 Functionalities:
1st: Quick Shopping with Mini-Cart Icon which is perfectly solved with one of the Woodmarts Preset (.wd-buttons)
2nd: An additional Button on hook woocommerce_after_shop_loop_item which is linking to the product-detail-page

2nd is basicly not a problem at all with this snippet:

function zusatzbutton_produktseite() {
    global $product;
    echo '<a href="'.esc_url( get_permalink( $product->get_id() ) ).'" class="button">Zum Produkt</a>';
}
add_action( 'woocommerce_after_shop_loop_item', 'zusatzbutton_produktseite', 10 );

Now the Problem: I want the button Link from the new created button sending customer to preselected Product-Detail-Page based on his Variation Selection made by Swatch on the Loop/Product Grid before.

Can you help me to achieve this by providing a snippet?

Screenshot: https://ibb.co/Wc77RWy

[DanielI2U]

Edit: Can we also achieve, that the Extra-Button is just shown WoodMart Product-Style #9 (Tile with Quick Shopping Icons) and reorder the swatches priority below product price instead of below title?

Kind regards,
Daniel

• This reply was modified 10 months, 2 weeks ago by DanielI2U.

Hello,

1. Sorry to say but right now there is no option in Theme Settings available for that. It requires Customization and this is beyond our limitations and support policy scope. Hope you can understand our limitations.

2. Try to use the below code for changing the position of the swatches, define it via Theme Settings -> Custom CSS.

.product-grid-item .product-element-bottom {
    display: flex;
    flex-direction: column;
}

.product-grid-item .wd-swatches-grid {
    order: 1;
    margin-top: 5px;
}

Kind Regards

Hi Luke,

I totally understand your Limitations. Would it be possible to get an offer from your developers?
So I might discuss this in our staff and there might be no problem to pay for customization if you would offer that.

Please let me know if you offer this service for charge.

Kind regards,
Daniel

Hi Luke,

another thing: I tried your custom CSS but it’s not working.
I think we have to reorder it by using php-priority or?

Please find a screenshot for what I want to achieve:
https://ibb.co/jR76sbf

Kind regards,
Daniel

Hello,

1. Sorry but currently we are not offering any paid customization services.

2. Sorry, use the below code instead of the above one.

.product-grid-item .product-element-bottom {
    display: flex;
    flex-direction: column;
}

.product-grid-item .variations_form{
    order: 1;
    margin-top: 5px;
}

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Kind Regards

Hello Luke,

thanks a lot for the CSS.

We kinda figured out by ourselfes to achieve the correct Link on Product Loop changing after variation selection and leading to correct Product Detail Page.

Here’s just one thing we need your In-Depth Knowledge about the WD-Theme:

We need the possibility to execute a custom javascript after changing the default sorting of an product archive page. At the moment we have implemented a javascript that is executed correctly when clicking on the variants (swatches).

But if you change the sorting or view, our JavaScript is lost by the ajax call.

How can we include this in our custom JavaScript so that it is loading again after the ajax call?

Thanks a lot.

Kind regards,
Daniel

Hello,

You should define your custom code through the below function:

(function($) {
	$(document).on('wdShopPageInit', function () {
		//your custom code
	});
})(jQuery);

Thanks for your patience. Hopefully, you are doing well.

Kind Regards

Hello Luke,

Thank you very much. That tip is really great. It will help us get further.

But there is still a problem.

We would need to trigger a buttonclick on the variant (div class=’wd-swatch’>variantcontent</div> after the wdShopPageInit event.

We tried it with the jQuery click() event. But unfortunately that didn’t work.
$(“.tax-product_cat .wd-swatches-product .wd-swatch:first-child”).click();
(The CSS path is correct)

Is there another function that triggers the click on a variant (swatch)?

Thanks a lot.

Kind regards,
Daniel

Hello,

Implementing this idea with Quick shop On variation click, unfortunately, will not work because the form is initialized only when the user hovers over the product, before the form is activated, all clicks on the buttons are not active, this is done for the purpose of performance of the page.

Kind Regards

Alright then we need to find a custom solution.
Thread can be closed by now.

Hello,

Always remember that you can reach out to us with any questions you may have.

We wish you a splendid day!

Kind Regards

[Author]

Posts