Product Page Layout

Hello,

Sorry for the inconvenience, firstly your provided WP-ADMIN Login details aren’t working now, so we are unable to proceed further in this regard on your Site.

Now, firstly the Personalize button for the Best Sellers AJAX Products Tabs section are appearing fine: https://snipboard.io/e1MIrX.jpg

The Star Ratings on the Single Product page are also appearing fine:
https://snipboard.io/Y5Q4UI.jpg
https://snipboard.io/X16YLK.jpg

The Thumbnail Images and Personalisation above the Add to Cart button concern is right now present on your Site which needs to be looked upon. Thumbnail Images are getting loaded once you visit the Page and are disappearing after the Page is completely loaded. The Personalise button is not showing at all on the Single Product page above the Add to Cart button.

So, could you please once try deactivating all the third party Plugins on your Site, remaining the Theme required ones activated. If the issue gets resolved, then reactivate them one by one to see which Plugin is causing the issue. If this doesn’t work for you then once also, try to activate the Parent Theme on your Site if you are using Child Theme on your Site.

If somehow the issue still persists, then please take complete Backup of your Site first, then provide us the valid WP-ADMIN Login details of your Site in the Private Content field along with the permission to completely debug your Site which includes deactivating all the third party Plugins and removal of on-Site Customization changes too, so that we can thoroughly check this issue on your Site and assist you accordingly.

Best Regards.

[E-N Admin]

Hi there,

Deactivated plugins and switched from Child theme to parent theme and found the following issues:

On child theme these issues occur:
– Personalisation button above Add to cart disappeared
– Image thumbnail in product page not appearing (desktop version only)

Switching to Parent theme:
– Personalisation button above Add to cart is now showing again
– Image thumbnail in product page still not appearing (desktop version only)
– The buttons for personalisation and add to cart on shop page are stacked on top of each other on mobile (no space in between) and also stacked on desktop and its suppose to be inline side by side. (previously mentioned this issue above or on other ticket)

See images: https://prnt.sc/iLl78qlE2Im9 and https://prnt.sc/MfCQL5rhoaUR

So switching between child and parent theme seems to have some issue with one or the other and doesn’t really solve anything because another issue arises. Can we just stay on current parent theme and fix the issue that’s came up when activated – as per above mentioned?

Sticking to parent theme, I think it’s easy enough to do css code for the personalisation and add to cart buttons to appear accordingly in shop page? I still don’t know what happened to the thumbnail images for desktop though.

Thanks for your help

• This reply was modified 1 year, 11 months ago by E-N Admin.

Hello,

So, with the Parent Theme activated we have done the following Custom CSS change on your Site to adjust things:

1- With the below Custom CSS being applied under the Global Custom CSS, the Add to Cart and Personalise buttons on the Products are adjusted inline:

.wd-hover-standard .wd-add-btn .add-to-cart-loop span {
	padding: 12px 60px !important;
}

.wd-add-btn.wd-add-btn-replace {
    float: left !important;
}

.brush_customizer_shop_loop {
    margin-top: 1.2em !important;
}

With the below Custom CSS being applied under the Custom CSS for mobile area, the Add to Cart and Personalise buttons were adjusted for the Mobile view:

.wd-hover-standard .wd-add-btn .add-to-cart-loop span {
	padding: 12px 7px !important;
}

.wd-add-btn.wd-add-btn-replace {
    float: none !important;
}

2- Regarding the Product Thumbnail Images not showing on the Single Product page, we deactivated all the third-party Plugins on your Site and then checked back the concern again, the Thumbnail Images were loaded fine: https://snipboard.io/C3NbQW.jpg

So, for the time being, we are remaining the third-party Plugins deactivated on your Site so that you can reactivate them one by one to see which Plugin is causing the issue in this regard.

Hope this helps!

Best Regards.

[E-N Admin]

Thanks so much for assisting in getting the design right. I have found the culprit of the product image thumbnail issue and its the Premium Add-ons plugin.

Last issue, the code for desktop has ‘.wd-add-btn.wd-add-btn-replace { float: left !important;’ which made all the buttons on shop page aligned to left instead of centre.
See image: https://prnt.sc/5M-MTH__0v7B

I tried changing the code to float: centre but it didn’t work it just stacked the buttons. Are you able to let me know what code I can use in replacement of float: left to get the buttons centred below the image?

Thanks again.
Cristine

• This reply was modified 1 year, 11 months ago by E-N Admin.

Hello,

Actually, Float only accepts 3 values i.e. left, right or none. The center isn’t its value.

Secondly, as you know the Add to Cart in general appear on the Products they don’t have any specific class added for specific Products so the change regarding the Float will also be applied to the ones on which only the Add to Cart button appears unfortunately.

So, we replaced the Float property from that class to display: inline-block. So, please once again check back the concern. As far as now we are seeing, things seems to be working fine.

Best Regards.

Thank you for your prompt response.

Are you able to please let me know how I can lessen the space between the two button for the mobile.
See image: https://prnt.sc/695hCR_Hb7mJ

Also, how can I add our personalisation button in the related products or products tab? I made a custom product page in Layouts. On the backend it does show the buttons (https://prnt.sc/0j5E5tzYLxmZ) but when I view the product page on the front end, the personalisation button doesn’t show (https://prnt.sc/O5_nS_vxpEYF).

Layout page: https://enuesque.com/wp-admin/post.php?post=49552&action=elementor#
Product View: https://enuesque.com/product/dollhouse-lane-14-piece-eye-face-complete-brush-set/

Thanks for you help.

Hello,

1- Under the Dashboard > Theme Settings > Custom CSS > Custom CSS for mobile area > we have applied the following Custom CSS to adjust the space between mentioned buttons:

.brush_customizer_shop_loop {
    margin-top: 0.5em !important;
}

2- As you know this Personalise button comes from a third party Plugin so we might suggest you to once try contacting the respective Plugin Support in this regard and see what they have to say about that. They can guide you better with this. Generally, when things are appearing under page builder editor and not on the Site preview, then it is mostly related to Cache being the issue. But if it is not that case, then it’s better to contact the Plugin Support.

Hope you can understand !

Best Regards.

[Author]

Posts