Skip Navigation

[Gelöst] Custom Product Template – Product Image Gallery Slider excluding Featured Image

Dieser Thread wurde gelöst. Hier ist eine Beschreibung des Problems und der Lösung.

Problem: Custom Product Template – Product Image Gallery Slider excluding Featured Image

Solution:

You can find the proposed solution in this case with the following reply: https://toolset.com/forums/topic/custom-product-template-product-image-gallery-slider-excluding-featured-image/page/2/#post-1271753

Relevant Documentation:

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.

This topic contains 23 Antworten, has 3 Stimmen.

Last updated by paulA-9 vor 2 Jahre, 6 Monate.

Assigned support staff: Minesh.

Author
Artikel
#1261555

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.

#1261767

Luo Yang
Supporter

Languages: Englisch (English ) Vereinfachtes Chinesisch (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

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

#1262645

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.

#1262651

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.

#1264071

Minesh
Supporter

Languages: Englisch (English )

Timezone: Asia/Kolkata (GMT+05:30)

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/

#1264567
Screen-Shot-2019-06-10-at-12.48.19-PM.jpg
Screen Shot 2019-06-10 at 12.49.47 PM.png

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.

#1265457

Minesh
Supporter

Languages: Englisch (English )

Timezone: Asia/Kolkata (GMT+05:30)

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.

#1266669

Minesh
Supporter

Languages: Englisch (English )

Timezone: Asia/Kolkata (GMT+05:30)

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

Can you please tell me where you added your shortcode?

#1266949

Please use hidden link as example,

I added the shortcode to views here: hidden link

#1267977

Minesh
Supporter

Languages: Englisch (English )

Timezone: Asia/Kolkata (GMT+05:30)

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?

#1268375
Screen Shot 2019-06-13 at 8.30.56 AM.png
Screen Shot 2019-06-13 at 8.29.50 AM.png
Screen Shot 2019-06-13 at 8.27.23 AM.png

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.

#1268441

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.

#1269153

Minesh
Supporter

Languages: Englisch (English )

Timezone: Asia/Kolkata (GMT+05:30)

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

#1269607

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

#1270191

Minesh
Supporter

Languages: Englisch (English )

Timezone: Asia/Kolkata (GMT+05:30)

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' );