Return to previous page

Questions about the single page product pages

This topic has 12 replies, 2 voices, and was last updated 1 years, 1 months ago ago by Rose Tyler

GTP

Participant

December 19, 2023 at 13:02

Hi 8theme team,

In regards to the single page product pages,

1) Is there anyway to edit the section which comes after the product information, specifically the section which shows the extra products

For example; https://xstore.8theme.com/elementor/demos/niche-market02/product/wooden-classical-golden-chairs/

This demo shows = “REALTED PRODUCTS”

How can we show more things such as

– Customers also purchased
– You may also like/be interested in
– Trending products
– Highest rated products
– On sale products

2) On the mobile version on the website (X-Store) demo, we see a button which is has the store icon logo, and once you click it – it takes you to the store/shop page of the website, how can we add this on the website for all screens? (so it shows up on computers/tablets as well)

3) Can we add similar product’s and search bars on the single page product pages? (on the side sections)
Please see PCA.

4) Can we add buttons which have the filters on it on the shop page and once you click it, it goes to that filter page?
Please see PCA.

5) We are not sure on what this would be called, it is where the product is displayed and shows some details.

https://xstore.8theme.com/elementor/demos/niche-market02/shop/

When you hover over the product it shows the image, title, -+, add to cart etc.

Is there anyway to edit this (the layout and content it displays)?

https://prnt.sc/b2DZN1D3pCD_

Other demos (competitors) show more details and content which make it look more appealing.
Please see PCA.

6) Can we change/add specific things on the single page products into buttons (something similar to the add to cart button etc.)

https://xstore.8theme.com/elementor/demos/niche-market02/product/air-fryer-with-dualzone/

For example, make the add to Wishlist/add to compare links, which are currently displayed as just text, and make them into buttons?

https://prnt.sc/ytopytClY8WK

7) Can we edit the eye icon which shows on “31 people are viewing this product right now”

on this demo; https://xstore.8theme.com/elementor/demos/niche-market02/product/air-fryer-with-dualzone/

And can we put this text into a button type element (which is similar to the add to cart button)?

8) Can we add a section which shows how many people have added that specific product to their shopping cart – which shows on the single product page? (Cannot find this option on the sales booster section)

This adds more social proof to products (can boost conversions)
Please see PCA.

9) Do you have any element which can resemble something similar to this website?
Please see PCA.

10) Can we edit the icon which appears beside the “in stock” text?

https://xstore.8theme.com/elementor2/industrial-power-tools/product/li-ion-cordless-handles-batteries/

And is there anyway we can put this text inside a box (like the add to cart button)?

11) Does X-Store have any feature which we can click the words and it opens up a window with the information?
Please see PCA.

12) Can we add badges with words like “NEW” / “HOT” / “TRENEDING” etc. on the product page?
Please see PCA.

13) Can we change the way the arrows are displayed on the image sections (clicking before and after)?

https://xstore.8theme.com/elementor/demos/niche-market02/product/wooden-classical-golden-chairs/

And have it changed to something solid?
Please see PCA.

14) Is there any image layout which we can display the images in one row?
Please see PCA.

15) Can we edit the panel popup which comes up near the bottom which shows that “this was recently purchased”?

https://xstore.8theme.com/elementor2/industrial-power-tools/product/fast-charge-screwdriver-accessories/

And can we add new things such as “this product was recently added to cart” / “this product was recently delivered” / “this product is trending right now” etc.?

16) Is there anything similar in terms of a element which has this feature?
Please see PCA.

17) Does X-Store have any review section specifically for product’s?
Please see PCA.

Thank you!

Please, contact administrator
for this information.

#377134 Copied Theme version: 9.2.5

11 Answers

Rose Tyler

Support staff

December 19, 2023 at 15:07

Hello, GTP,

Thank you for reaching out to us with your inquiries about customizing the single product pages.
We appreciate the opportunity to assist you in enhancing your website’s functionality and appearance. Please find the answers to your questions below:

1/ For customizing the single product page, you have the option to utilize one of the following two builders:
– Navigate to Theme Options > WooCommerce > Single Product Builder.
– Use the Single Product Builder with Elementor, which you can learn more about here: https://www.8theme.com/documentation/xstore/xstore-builders/xstore-single-product-builder-with-elementor/.
We encourage you to experiment with both options to determine which best suits your needs.

2/ Regarding the button you referenced, are you referring to the one depicted in this screenshot: https://prnt.sc/08FR_UZsSnWu, as seen on the mobile panel?

3/ Indeed, you can incorporate widgets into the single product sidebar by going to Appearance > Widgets in your dashboard.

4/ Unfortunately, the feature you mentioned is not available at this time.

5/ We invite you to explore the various settings accessible under Theme Options > WooCommerce > Shop > Products design to find the configuration that meets your requirements.

6/ To achieve your desired outcome, you may combine the Single Product Builder with Custom CSS code.

Kind Regards,
8theme team

Please contact administrator
for this information.

#377153 Copied

Rose Tyler

Support staff

December 19, 2023 at 15:22

Hello,

7/ a – Currently, our platform does not provide a direct feature to change this specific icon. However, you can achieve the desired effect by implementing custom CSS code.
b – Please note that additional customization may require modifications to the files.

8/ To illustrate, you may refer to the following examples: – https://prnt.sc/9q0gRO4oMLUL > https://prnt.sc/ZELB5fPoKgSu

9/ Regrettably, we do not have that functionality available. Nonetheless, you might consider trying the following element as an alternative: https://prnt.sc/Lr_tWUC8A9iO

10/ Сustom CSS code is a viable solution for customization.

Kind Regards,
8theme team

#377154 Copied

Rose Tyler

Support staff

December 19, 2023 at 15:34

Hello,

11/ We would like to inform you that the SIZE GUIDE is a feature included within the Single Product Builder. Additionally, the Modal popup element is versatile and can be utilized for various purposes. For more details, please visit our demo at: https://xstore.8theme.com/elementor/demos/minimal-fashion02/design-elements/

12/ To achieve your desired outcome, we recommend referring to our comprehensive guide on using the XStore Single Product Builder with Elementor, available at: https://www.8theme.com/documentation/xstore/xstore-builders/xstore-single-product-builder-with-elementor/

13/ Please note that you have the option to implement Custom CSS code to customize your site further.

14/ We invite you to review the following screenshot at https://prnt.sc/k-Xnn67Ise63 and test the options provided in our guide to see if they meet your requirements: https://www.8theme.com/documentation/xstore/xstore-builders/xstore-single-product-builder-with-elementor/

15/ For insights on creating a fake sale popup, we encourage you to read the following article: https://www.8theme.com/documentation/docs/fake-sale-popup-2/. Please explore the available options and conduct tests as necessary.

16/ We regret to inform you that the feature you are inquiring about is not currently available.

17/ For examples of testimonials elements, please visit our demo page at: https://xstore.8theme.com/elementor/demos/minimal-fashion02/testimonials-element/

Kind Regards,
8theme team

#377155 Copied

GTP

Participant

December 23, 2023 at 09:16

Hi Rose,

Thanks for your reply in this thread.

1) Thank you for the link.
Just to clarify, we can edit the section which appears after the product such as ‘Related products” etc?

And can we add more than one line in this?
We are looking to add multiple things such as;

– Customers also purchased
– You may also like/be interested in
– Trending products
– Highest rated products
– On sale products

2) This is the button we discovered randomly = https://prnt.sc/Zi35zfebA9YZ

How can we add this on both the mobile/pc screens?

3) Thank you – I think we would need to implement this by adding a section on the single page product builder – or will this be done by itself if we just add the widget?

– How can we make new widgets and where would we add this? Can you possibly share a screenshot please? Would it be the shop sidebar?

4) No problem, i think this was possibly done via a plugin on the website which we provided in the PCA. We will try to see how can this be replicated or ask on the customization panel.

5) Thank you, but we did not find any section where we could edit this. Is it possible to share a screenshot please?

And do you know what this would be called? https://prnt.sc/b2DZN1D3pCD_
It is when you hover over a product and it shows information etc.

6) Thanks for confirming, we will see what can be done!

7)

a) + b) Thank you for the clarification – we will research more about this and ask on the customization panel.

8) Great! And for example, if we wanted to show both, viewing and then added to cart – we would need custom CSS?

9) Thanks for the advise, and if we want something similar, custom CSS would be the option to go?

10) Thanks! And with custom CSS, can we get something for example – inside a box, with a gif and text? Meaning the customization options would be endless with we were to get this done separately?

11) Awesome, the modal popup would be a great options for this.
Would the size guide be specifically for the size? Or can we possibly add different information on there and can we change the words from “size guide” to something like “delivery options”?

12) Thank you. Do you know any element or way which would resemble the badges and then add them under the product name etc.?

13) Thank you, do you perhaps some CSS code which we can add to resemble the website on the PCA?

14) Thanks for the screenshot, we will try this out.

15) Great! I think the current pop-up just shows the people who purchased etc.

If we were to show other things such as “this product was recently added to cart” / “this product was recently delivered” / “this product is trending right now” – Basically showing other things (versus the current purchased popup)

We would need to get customization done for this?

16) Thanks for confirming, we will ask this on customization services.

17) Thank you – and for example if we wanted to get something similar as the website, we could ask the customization services and/or look for a 3rd party plugin?

18) If we wish to add a GIF instead of an image near things such as “people are viewing” is this possible?
Please see PCA

Thanks!

Please contact administrator
for this information.

#377517 Copied

Rose Tyler

Support staff

December 25, 2023 at 10:32

Hello,

You’re welcome!

1/ You are indeed permitted to make the edits as previously described. Have you had the opportunity to explore the available options?

For further information on the various default product types, please refer to our documentation at – https://woo.com/document/related-products-up-sells-and-cross-sells/#:~:text=Products%20can%20be%20Related%20to,to%20the%20Product%20Data%20panel.

2/ Please note that the button in question is exclusively available for the AMP mobile version.

You can find more details here: https://www.8theme.com/documentation/xstore/amp-plugin/general-info-amp/.

3/ ” I think we would need to implement this by adding a section on the single page product builder – or will this be done by itself if we just add the widget?” – It is up to you, in Single product Builder > Layout – you can select if the sidebar will be an element in a section of the builder https://prnt.sc/CORfVZOg9af8 or “static section” – https://prnt.sc/7aO5UDlx8-Pg

“How can we make new widgets and where would we add this? Can you possibly share a screenshot please? Would it be the shop sidebar?” – Appearance > Widgets > https://prnt.sc/8Aeuxmukzw9v

Private Content

Kind Regards,
8theme team

Please contact administrator
for this information.

#377589 Copied

Rose Tyler

Support staff

December 25, 2023 at 10:49

Hello,

5/ We have created a screenshot for you from Theme Options > WooCommerce > Shop > Products design – https://prnt.sc/cEJO1fgbjRgF

“And do you know what this would be called? https://prnt.sc/b2DZN1D3pCD_” – Theme Options > WooCommerce > Shop> Products design > Design Type.

8/ Unfortunately, the current configuration does not support the display of both options simultaneously.

9, 10/ The feasibility of certain customizations depends on your specific objectives. Some adjustments may be possible through custom CSS code, while others may require modifications in PHP and JavaScript.

11/ You have the flexibility to add various types of information as needed.

12/ You may utilize the Heading element – https://we.tl/t-E51qjrjnbM the Elementor editor will be available with the new builder https://www.8theme.com/documentation/xstore/xstore-builders/xstore-single-product-builder-with-elementor/ or you can create a static block using Elementor and use it in the old Single Product Builder which is currently activated on your site.

Kind Regards,
8theme team

#377590 Copied
Rose Tyler

Support staff

December 25, 2023 at 10:59
Hello,

13/ We would like to provide you with a snippet of code that can be implemented within the ‘Theme Options > Theme Custom CSS’ section to modify the styling of the arrows on the single product page. Please refer to the following screenshot for guidance: https://prnt.sc/_5msPAOwBgwW

.single-product .arrows-hovered:hover>.swiper-container .swiper-custom-left, .single-product .arrows-hovered:hover>.swiper-container .swiper-custom-right { background-color: blue !important; border-radius: 10px; color: w; } .single-product .swipers-couple-wrapper .swiper-custom-left:not(.et-swiper-elementor-nav):hover, .single-product .swipers-couple-wrapper .swiper-custom-right:not(.et-swiper-elementor-nav):hover { color: white; }

15/ Regarding the customization you inquired about, it is indeed possible but may not be straightforward. Therefore, we are unable to provide an example here. To initiate your request and outline your specific requirements, please follow this link: https://prnt.sc/PZkD4AEf27qO https://www.8theme.com/account/#etheme_customization_panel. Upon receipt of your request, we will prepare a detailed estimate for the customization work.

17/ In response to your query, the answer is yes.

18/ Unfortunately, the option you are referring to is not available by default.

Kind Regards,
8theme team
#377591 Copied
GTP

Participant

December 28, 2023 at 14:42

Hi Rose,

Thanks for your replies and hope you are doing great today!

1) Yes, we are just confused if this is done via X-Store or on the WooCommerce section of things.
From X-Store we see the panel of related things; https://xstore.8theme.com/elementor/demos/niche-market02/product/wooden-classical-golden-chairs/

And on WooCommerce we see the panel to add things such as cross sells and up-sells.

But not sure how to add more rows and have things like

– Customers also purchased
– You may also like/be interested in
– Trending products
– Highest rated products
– On sale products

Would this be done on WooCommerce or on X-Store (or both)? If so where can we do this/find the place to edit this etc.

2) Oh okay – we were getting this randomly on the website when we went on mobile. So basically it just makes the websites faster and reduces extra things which are not needed.

Where can we find the settings for this (in order to turn off/on)
Currently when we visit the website it shows things as in the “AMP mobile version”

3) Thanks for the screenshots, very helpful.

Oh great, this is via the shop sidebar. Can we also add a custom static block for the “Shop sidebar”?

5) – Thanks for the screenshot so we can locate where this can be done, appreciate it!

– We want to edit the way the design type shows up on X-Store (the way product’s are displayed on homes pages/shop pages etc.) and replicate other websites. Can we get this done via Customization services?

8) Thanks for confirming, we will try to get this done via Customization services.

9) + 10) Thanks for confirming, we will try to get this done via Customization services.

11) Thanks for confirming, where can we set specific static blocks for the sizing guide text?

12) Thanks for the alternative on this – we will try to get this done or use the Customization services.

13) Thank you for the custom code!

15) Understood, we will get this done via Customization services.

17) Thanks for confirming, we will try to get this done via Customization services.

18) Understood, we will get this done via Customization services.

Thanks once again!

Please contact administrator
for this information.

#377931 Copied

Rose Tyler

Support staff

December 29, 2023 at 12:09

Hello, GTP,

Thanks for your replies and hope you are doing great today!

1/ I would like to draw your attention to the following screenshot: https://prnt.sc/Y12B_OLHWyDs. For further clarification on this matter, please refer to our documentation here: https://www.8theme.com/documentation/xstore/xstore-features/frequently-bought-together/.

To implement cross-sells and up-sells, you will need to follow the instructions provided in the WooCommerce documentation. Subsequently, these can be displayed on the front end using the XStore Single Product Builder.

Could you please confirm which Single Product Builder you have decided to utilize?https://prnt.sc/HpWBna0fhsMq

For instance, if you have chosen the ‘Single Product Builder (old)’ located under Theme Options > WooCommerce, you can display products by utilizing elements as demonstrated in the provided example: https://prnt.sc/Ww-tQz9EKBOT > https://www.ip****red.ca/?product=20v-max-brushless-circular-saw Where “test products block” static block was created using Elementor and shown via HTML element of the builder.

2/ Dashboard > Plugins > disable XStore AMP plugin.

3/ You are indeed able to add a static block widget to the sidebar by going to Appearance > Widgets.

5/ Yes, you can.

11/ Adjustments can be made through the sizing guide settings, accessible via the Single Product Builder: https://prnt.sc/AySQKXAYOawL

Regarding customization services, these are provided by a separate team. Consequently, I am unable to specify who will be assigned to your case or provide further details. For more information, I recommend reaching out to them directly.

Kind Regards,
8theme team

#378045 Copied

GTP

Participant

January 9, 2024 at 18:21

Hi Rose,

Thanks!

1) Thank you

In regards to the single product builder, its the new one.

How can we add all those sections via the

“Subsequently, these can be displayed on the front end using the XStore Single Product Builder.”?

2) + 3) Thank you!

5) That is great, we are trying to get it more customized to show more information and will ask this on customization services.

We are trying to make it similar to these ones; (PCA)

11) Thanks!

Please contact administrator
for this information.

#379370 Copied

Rose Tyler

Support staff

January 10, 2024 at 09:29

Hello, GTP,

You’re welcome!

1/ We are pleased to inform you that our single product builders are intuitively simple to use. To get started, simply open the design tool and browse through the available elements. You will find that everything is self-explanatory. Just select the desired element and add it to the content area of your page.
For further guidance about new single product builder, please refer to the following documentation: https://www.8theme.com/documentation/xstore/xstore-builders/xstore-single-product-builder-with-elementor/

Kind Regards,
8theme team

#379442 Copied
Tagged: best selling woocommerce themes, optimized woocommerce themes, product page details, product page queries, single page product pages, woocommerce questions, woocommerce theme features
Viewing 12 results - 1 through 12 (of 12 total)