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, 9 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.

Our next available supporter will start replying to tickets in about 1.44 hours from now. Thank you for your understanding.

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, 9 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.