Show custom fields on WooCommerce image hover state

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to show custom fields and the wpv-woo-buy-or-select shortcode when I hover over my WooCommerce product image, but the link does not work.

Solution: It's not possible to use the wpv-woo-buy-or-select shortcode inside a link tag, because it generates its own link tag. Nested link tags are invalid HTML and will not behave as expected. Therefore, you must use a different method to create the hover effect if you want to place the wpv-woo-buy-or-select shortcode in the hover.

This support ticket is created 6 years, 10 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Classifieds reference, Customizing Toolset Starter, Discover WP, E-Commerce reference, Reference sites, Toolset Starter Theme, Training sites, Using Toolset Starter, Views plugin, WordPress Archives, Your custom sites

This topic contains 2 replies, has 2 voices.

Last updated by rolandP 6 years, 10 months ago.

Assisted by: Christian Cox.

Author

Posts

February 17, 2018 at 2:42 pm #617024

rolandP

Hi,

I work on discover-wp to do solution, when will be I move to my domain.

On my new project I want use your demo content: hidden link (yes this is mine)
But one think is missing, Archives - Products: Custom fields on hover image.
This solution is on hidden link (Yes this is my): hidden link

I am trying to integrate it but it does not go out.

Now I have this: hidden link

I need this: hidden link

I do this: hidden link

First I go and creat custom fields:
hidden link

I go to: Toolset > WordPress Archive > Products listing

Find this:
<div class="[wpv-post-class add='panel']">

[wpv-woo-onsale]
[wpv-post-featured-image size="shop_catalog" class="aligncenter"]

<div class="panel-body text-center">
<h3>[wpv-post-link]</h3>
[wpv-woo-product-price]
[wpv-woo-products-rating-listing]
[wpv-woo-buy-or-select add_to_cart_text='' link_to_product_text='' group_add_to_cart_text='' external_add_to_cart_text='' show_quantity_in_button='no' show_variation_options='no']
</div>
</div>

Replace with this:
<div class="classifieds-slider">

[wpv-post-featured-image size="shop_catalog" class="aligncenter"]

[wpv-post-title]

[types field='delivery-time' format='FIELD_VALUE'][/types] USD

[wpv-post-taxonomy type="listing_cat" format="name"]

[wpv-woo-product-price]
[wpv-woo-products-rating-listing]
[wpv-woo-buy-or-select add_to_cart_text='' link_to_product_text='' group_add_to_cart_text='' external_add_to_cart_text='' show_quantity_in_button='no' show_variation_options='no']

<div class="panel-body text-center">
<h3>[wpv-post-link]</h3>
[wpv-woo-product-price]
[wpv-woo-products-rating-listing]
[wpv-woo-buy-or-select add_to_cart_text='' link_to_product_text='' group_add_to_cart_text='' external_add_to_cart_text='' show_quantity_in_button='no' show_variation_options='no']
</div>
</div>

many thanks

February 18, 2018 at 5:38 pm #617175

Christian Cox

Hi, it looks like you have nested the wpv-woo-buy-or-select shortcode inside a link tag:

<div class="classifieds-slider">
  <a href="[wpv-post-url]">
    ...other code...
    [wpv-woo-buy-or-select add_to_cart_text='' link_to_product_text='' group_add_to_cart_text='' external_add_to_cart_text='' show_quantity_in_button='no' show_variation_options='no']
    ...other code...
  </a>
</div>

This is a problem because the wpv-woo-buy-or-select shortcode creates another link tag. This results in one link tag nested inside another link tag, which is invalid HTML. You cannot place the wpv-woo-buy-or-select shortcode inside another link tag.

March 2, 2018 at 4:56 pm #621480

rolandP

Topic to close.