Product Listing Or Any Way To Display

Hi All

I want to create listing or want to display like this , how can i do request to please let me know

First Image at top then below that Title then below Category below that Description and below that Read Review Button on click should open Page

Request to please let me know how can we do that

Please also have a look at the reference Site And Also Screen Shot attach

https://clickretina.com/review/ ( i want like this )

Attachments:

You must be logged in to view attached files.

Hello,

To make the product grid design:

Navigate to > Theme Settings > Products Archive > Product Styles and choose the product style for archive pages and configure the options about elements.

If you have any questions, feel free to contact us.

Best Regards,

Hi

I went to Theme Setting –> Product Archieve –> Product Style ( And selected new Style )

But on home page it is not showing up ?

QUERY

1) If i want to change the Product Style on Home Page how can i do that ?

2) When i click on Shop Page nothing come up , just show great thing are on it way ( it should show by default some layout that we can modify

Please have a look at the screen shot attach

Attachments:

You must be logged in to view attached files.

Hi

I went to Theme Setting –> Product Archieve –> Product Style ( And selected new Style )

But on home page it is not showing up ?

QUERY

1) If i want to change the Product Style on Home Page how can i do that ? not on hover but when some one open the page it should shown ?

2) When i hover over the Product listing it is showing product style on shop page. Without Hover i want to see that new Style how can i do that ?

Please have a look at the screen shot attach

Attachments:

You must be logged in to view attached files.

Hello,

01. It looks like on your Home Page, you’re using either a Product Grid or Product Carousel widget to display products. These widgets are independent of the global settings made under Theme Settings > Product Archive > Product Style.

To apply your desired product style on the Home Page:

1. Edit the Home Page using your page builder (Elementor).
2. Locate the Product Grid or Product Carousel widget that is displaying the products.
3. Click to edit the widget and go to the Style tab.
4. Under Product Design, select either: https://ibb.co/S4gys5SX
“Inherit from Theme Settings” – This will apply the product style you selected in the Theme Settings.

Or choose a custom product design for this section if you want it to look different from the shop page.

02. Try to disable the maintenance mode in WooCommerce Settings > Site visibility > Select the live option and check the issue.

Please refer to this screenshot: https://ibb.co/xK4WvNDJ

Best Regards,

Hi

When i hover over the Product listing it is showing product style on shop page. Without Hover i want to see that new Style how can i do that ?

Hello,

Just to confirm—are you looking to remove the hover effect on the product listings and always display the style that currently shows on hover (like image, buttons, etc.) even without hovering?

If so, please share the URL of your shop page. I will check and give you a custom css code.

Best Regards,

Hi All

I went to Theme Setting –> Product Archieve –> Product Style

And selected the Style which is show in screen shot

Please have a look at the website mention below

Reference : https://clickretina.com/review/

QUERY

What we want to do

1) Home Page : We want ( This is our website : https://reviewdigitals.com/ ) we want to display under this page
–> BEST SELLING PRODUCT and ALSO THERE WILL BE SECTION – LATEST PRODUCT . we want to display the Product Listing under Best Selling Product And Latest Product as show in screen shot given below

Please Note : This format should show normally when some one come on page and not on hover over listing

That is
A) Image
b) then title
c) Price
d) Description
e) Button ( Read Review and Rating as shown in reference website provided above )

Also

2) Shop Page : If we keep shop Page then Product Listing should be like show in screen shot

Please Note : This should show normally not on hover
A) Image
b) then title
c) Price
d) Description
e) Button ( Read Review and Rating as shown in reference website provided above )

Attachments:

You must be logged in to view attached files.

Hello,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

.wd-product.wd-hover-quick .wd-add-btn {
    transform: translateY(0) translateZ(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.wd-product.wd-hover-quick .wd-buttons {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

Best Regards,

Hi All

I have pasted Custom CSS code as provided but it is not working as expected

1) On Home Page – It is not showing as we are excepting ( Have attach screen shot what is showing right now )

Please note :

we want to show as ON PAGE LOAD

A) IMAGE
B) TITLE
C) PRICE
D) DESCRIPTION
E) BUTTON ( READ REVIEW )

ALSO

2) SHOP PAGE – It is not showing as as we are excepting ( Have attach screen shot what right now it is showing –> on HOVER IT IS SHOWING . WE DONT WANT TO SHOW ON HOVER)

We want to show in this sequence order ON PAGE LOAD

1) IMAGE
2) TITLE
3) PRICE
4) DESCRIPTION
5) BUTTON ( READ REVIEW )

Attachments:

You must be logged in to view attached files.

Hello,

Unfortunately there is no such option to achieve the hover state as a default state of the product grid. So, the short description can’t be displayed without a hover effect.

If you want to disable the hover effect, navigate to Theme Settings > Product Archive > Products Styles > choose the standard button hover effects on product hover.

Best Regards,

Hi

how can we show description in Product Listing or what ever field we want in product listing ( that is under Best Selling Product )

Hello,

If you want to show a short description. You need to choose the “show summary on hover”style. Navigate to Theme Settings > Product Archive > Product Styles > Choose the “show summary on hover” product style. Then, show “excerpt” in the Hover content in the Theme Settings > Product Archives > Product Styles.

This product style will show your short description on grid products.
https://monosnap.com/file/swCqK6RIIrYuhoROH6YOkEfBjfPMKx

For the Home page, edit the Product Grid or Product Carousel widget that is displaying the products.

3. Click to edit the widget and go to the Style tab.
4. Under Product Design, select either: https://ibb.co/S4gys5SX
“Inherit from Theme Settings” – This will apply the product style you selected in the Theme Settings.

Or choose a custom product design “Show summary on Hover” for this section.

Best Regards,

Hi All

I was able to add short description on product listing with PHP Code , please have a look at the screen shot attach below

QUERY

1) I want to Remove the button add to cart which is there above title and below image

2) I want to add button with name it as “Review” and show it below Short description

3) Right now there is border only for image i want to show till short description

Attachments:

You must be logged in to view attached files.

Hello,

Unfortunately, it is not possible. HTML structure does not allow solving it by custom CSS. Such modification requires complicated Woocommerce code customization, which is not covered by our support.

We recommend the Toolset plugin: https://xtemos.com/docs/woodmart/faq-guides/building-custom-woocommerce-sites-with-toolset/

Hope this Helps!

Best Regards,

Hi

Can we remove Hover Effect that is to display nothing on mouse over product listing ( that is hover )

please have a look at the screen shot attach below

Attachments:

You must be logged in to view attached files.

Hello,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

.wd-product .wd-buttons[class*="wd-pos-r"] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

Best Regards,

[Author]

Posts