[Resolved] Custom Product Template – Product Image Gallery Slider excluding Featured Image

[Author]

Posts

[paulA-9]

Tell us what you are trying to do?
I am trying to customize the single product template Product Images to look more like this, hidden link

I want a full-width slider for images except for Featured image, then I want to display only featured image below it.

1. Get Product Images except for Featured Image in full slider(preferably flexslider)
2. Get Featured Image Only(already know how to do this)

Is there any documentation that you are following?
I am following toolset docs but am stuck now.

Is there a similar example that we can see?
hidden link

What is the link to your site?
hidden link

Let me know if you need me to deactivate the coming soon page so you can see the website.

[Luo Yang]

Hello,

There is built-in sliders feature within Views plugin, see our document:
https://toolset.com/documentation/user-guides/creating-sliders-with-types-and-views/

If the flexslider is requred in your case, then it need some custom codes, I suggest you try to integrate the flexslider sliders with Views, for example:
1) Load flexslider JS/CSS files in your website
https://developer.wordpress.org/reference/functions/wp_enqueue_script/

2) Setup a post view:
- query product posts
- output the result according to flex slider document:
hidden link

To display the Featured image, please check Views shortcode [wpv-post-featured-image]
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-post-featured-image

Post excerpt: [wpv-post-excerpt]
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-post-excerpt

[paulA-9]

Hi Luo Yang,

I need to display the Single Product gallery images on each product page as a full-width slider.

Step by step instructions would be helpful.

Let me know if you can provide this level of support. If not I can find another solution. $199 per year for this copy-paste support is not worth it.

[paulA-9]

I created a custom shortcode to display the product images.

Problem is images are showing as unformatted and not in a slider.

I need help creating a slider from gallery images using my shortcode.

[Minesh]

Luo is on vacation. This is Minesh here and I'll take care of this ticket. Hope this is ok.

As I understand, you wanted to create the image gallery using the repeating field. Have you checked the following Doc:
=> https://toolset.com/documentation/user-guides/create-image-galleries-using-toolset-and-custom-fields/

[paulA-9]

Thank you for your response but that did not help.

I am not trying to create an image gallery using a repeating field. As this will not allow me to create a custom Single Product Template.

I am trying to get Single Product Gallery Images in a Full-width Slider within the single product page. Please let me know if you have trouble understanding what I am trying to achieve.

Anyway, I already managed to get the images I want creating custom shortcodes in functions.php but I am having a problem, please see attached screenshot.

The Product Gallery Images I have put them under Flex Slider by creating shortcodes in functions.php and using them in Views.

The problem is that when I try to add the Product Category Shortcode above the slider, it does not work. And I noticed this on the HTML markup.

I am guessing that it is due to the custom shortcode.

Please help.

[Minesh]

Yes - it could be due to that custom shortcode you prepared and we do not support such custom edits as per our support policy but if you can share problem URL and access details I will try to have a look at your issue.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

I'm checking one of the product pages: hidden link

Can you please tell me where you added your shortcode?

[paulA-9]

Please use hidden link as example,

I added the shortcode to views here: hidden link

[Minesh]

thanks for all details. Maybe I do not understand your issue yet. I see the page and view you shared, As I understand, view is displaying the slider images now where I can see the Product Category Shortcode you added?

[paulA-9]

Hi,

I will clarify, for example;

I have created a shortcode to display "Free Sample" Button to product pages.

<?php
function display_display_sample_btn() {

?>
<form class="cart" method="post" enctype='multipart/form-data'>
<button type="submit" name="add-to-cart" value="2689" class="single_add_to_cart_button button alt">Order a Free Sample</button>
<input type="hidden" name="free_sample" value="<?php the_ID(); ?>">
</form>

<?php
}
add_shortcode( 'woo_display_sample_btn', 'display_display_sample_btn' );

My goal here is to place this shortcode within the "Template for Products" next to the "add to cart button".

The problem is: The button is pushed to the top of the main product image. When I place the shortcode next to the the "Add to cart" shortcode. See screenshots.

Let me know if you have any questions.

[paulA-9]

I am trying to:
Add a custom shortcode next to the add to cart button using Product Template.

Link to a page where the issue can be seen:
hidden link

I expected to see:
The "Order a free sample" button should be next to the add to cart button.

Instead, I got:
The sample button is being pushed to the top of the page below the slider. It seems all custom shortcodes are being pushed to the top...

Please help.

[Minesh]

Ok great - now I understand.

I've removed the shortcode you created [woo_display_sample_btn] from functions.php file and modified a little bit and added to Toolset's custom code section as given under:
=> hidden link

function display_display_sample_btn() {

 $str ='<form class="cart" method="post" enctype="multipart/form-data">';
 $str .= '<button type="submit" name="add-to-cart" value="2689" class="single_add_to_cart_button button alt">Order a Free Sample</button>';
 $str .= '<input type="hidden" name="free_sample" value="<?php the_ID(); ?>">';
 $str .= '</form>';

  return $str;

}
add_shortcode( 'woo_display_sample_btn', 'display_display_sample_btn' );

Now, I can see the button is displayed just after the "Add to Cart" button:
=> hidden link

[paulA-9]

Hi,

Thank you for your response.

This has broken my /cart/ page. Also, I noticed that

value="<?php the_ID(); ?>">

is not working.

I am not sure if this is within the scope of your support. I hope you can help me get this working.

#3 is what is causing the break I believe. :

$product_name .=  " (" . $product->get_name() . ")";

hidden link

[Minesh]

Can you please check now. I've adjusted the code as given under to add the the_ID() function.

function display_display_sample_btn() {

 $str ='<form class="cart" method="post" enctype="multipart/form-data">';
 $str .= '<button type="submit" name="add-to-cart" value="'.the_ID().'" class="single_add_to_cart_button button alt">Order a Free Sample</button>';
 $str .= '<input type="hidden" name="free_sample" value="'.the_ID().'">';
 $str .= '</form>';

  return $str;

    }
add_shortcode( 'woo_display_sample_btn', 'display_display_sample_btn' );