Quick View help

Hey Hi,
I wanted some Custom Code For the Quick View popup

1. In the Quick View option the “Short Description” of the product is showing just after the price but i want it to show the “short description” at second last means before the “share” option and after the “product Meta”.

2. I also wanted the quick view option Product image Size to be 100px and should be in the left side and the title and price and other data should be on the right side. the image and details should not be in vertical but should be horizontal like “display: inline-flex” and it should be for all devices Mobile and Tablet also.

3. I want the Size of Title and Price in quick view popup to be 16 px

4. I also wanted to shop the main description in the Quick View Popup.

Please Solve my Problem. Thank You in Advance.

Hi nexoraretail,

Thanks for reaching to us.

1. Please add the below Custom CSS code to Theme Settings > Custom CSS > Desktop CSS:

.quick-view-horizontal div.summary-inner {
    display: grid;
}
    
.quick-view-horizontal .woocommerce-product-details__short-description {
    order: 6;
}

.quick-view-horizontal .wd-social-icons.wd-shape-circle {
    order: 7;
}

2. Navigate to Theme Settings > Shop > Quick View to change the layout https://ibb.co/sJVYGTny

3. Navigate to Theme Settings > Typography > Advanced. In this area, you can assign elements Quick View Price and Quick Price Title https://ibb.co/j95zNPk8

Please refer to our documentation https://xtemos.com/docs-topic/advanced-typography-settings/

4. Unfortunately, it requires customization and out of our basic support. Thanks for understanding.

Regards,

ok Thank you. i also asked how to reduce the image size to 100px on Quickview please also solve that till then i have hidden my image in quick view by using “display: none”

but i have one more problem
in “Mobile devices” the quick view popup has unnecessary padding in the bottom side please give me code to remove it.

you can visit our website on mobile devices and see the extra padding in quick view.

Attachments:

You must be logged in to view attached files.

Hi nexoraretail,

Add the below Custom CSS code to Theme Settings > Custom CSS > Custom CSS for mobile:

.quick-view-horizontal div.product-image-summary {
    min-height: 100%;
}

Regards,

Hey and What about the unnecessary extra padding that is coming in the bottom of the quick view popup? Please see the image i have attached in the previous message.

And also this above code does not reduce the size of the image i need to make the image small not keep it as it is. I want it to be aligned at the left side and content on the right side.

Hi nexoraretail,

Above code is used to remove extra padding on mobile. Please add the below Custom CSS code to Theme Settings > Custom CSS > Desktop CSS to change product image container’s width to 100px.

div.popup-quick-view .woocommerce-product-gallery {
    width: 100px;
    min-width: auto;
}

.product-quick-view .wd-grid-g {
    display: flex;
    gap: var(--wd-gap);
}

.product-quick-view .wd-grid-g > :first-child {
    flex: 0 0 100px; /* fixed width */
}

.product-quick-view .wd-grid-g > :not(:first-child) {
    flex: 1; /* share remaining space equally */
}

Regards,

ok thank you so much. it’s working

Hi nexoraretail,

Glad to hear your issue has been resolved. Keep us in mind for future questions and concerns, we’re always here to help!

If you have a quick minute we always appreciate a 5-star rating on our theme!

https://themeforest.net/item/woodmart-woocommerce-wordpress-theme/reviews/20264492

Your feedback is the motivation to improve our work and services.

Regards,

[Author]

Posts