Trying out Woodmart – coming from Xstore

hi guys,
i have bought your template and I’m happy i did.
There are few things that i need your assistance though.

1) i have finally made products grid align, add to cart buttons are aligned with other products, however i also need titles to be aligned both on desktop as on mobile, and the image of the product must be aligned in center
2) i have also added in code snippets a css code that will crop images in products grid properly, however when page reloads it won’t do it from the first time, but when i refresh page for second or third time, only then i see that images are showing correctly
2) Single product page – images are too big, especially the tall ones. Also in quick view i experience same issue
3A) dont understand how to create a sidebar with product categories ..
3B) on desktop sidebar must always be open, but on mobile there should be a floating button on the left side that when you click it you will have a list with product categories (go to my current website to check)
4) how to modify filter above products, i’m thinking to put there tags , like Bio products, zero lactose products, etc
5) how is it possible to change “add to cart” button to a “cart sign”-button, so i mean without any words, just a sign next to quantity input
6) shadow of the bottom header must be applied only for the under side of bottom header, not on both sides top and bottom, because shadow on top is on the main header , which is not good
7) see my current website, you will see that there is a carousel running with information in the top header,
how can i do the same with woodmart?
8) main menu in main header must have green a bit rounded in the corners buttons, the active page must remain green button, others only on hover
9) How to make bottom of pages same as I have done with xstore: bar with contact form if person didn’t find product, Newsletter sign up form, footer
10) Language switcher as on my website

Attachments:

You must be logged in to view attached files.

Hello,

Sorry for a bit of delay in the response.

1- To adjust the Product Titles in one line like you mentioned, the Product Images need to be adjusted on your Site staging site. So, we have applied the following Custom CSS in this regard and paste it to

.product-grid-item .product-image-link img {
    object-fit: contain !important;
    height: 25em !important;
}

This will make the Product Images adjusted in a manner that the Titles will get automatically in line, this is how it previews now on your Staging Site: https://ibb.co/y87f5v5

2- Regarding the reloading concern regarding the Images that you mentioned, we have checked the Shop and Category pages of your Site after clearing out browser cache; The images loaded perfectly fine in the first load.

2 (a) – Regarding the Quickview and Single Product Page Image appearing large concern, we have adjusted those both too with the help of following Custom CSS already applied on your Site on the same defined location:

.popup-quick-view .woocommerce-product-gallery :is(img,.woocommerce-product-gallery__image) {
	object-fit: contain !important;
	height: 25em !important;
}

.woocommerce-product-gallery img {
	height: 25em !important;
	object-fit: contain !important;
}

3 (a) – The Sidebar already has Product Categories widget on your Site under the Dashboard > Appearance > Widgets > Shop page Widget Area.

3 (b) – If you are using Shop filters on your Site then there is the option under the Theme Settings > Product archive > Shop filters State > there you can find the option: Shop filters area always opened which we have enabled on your Site: https://ibb.co/jZxJG3g

Regarding the Sidebar, there isn’t an option available to make them always open and this is the same behavior on your main Site too. The floating Filter button for Mobile view is already enabled on your Site from Theme Settings.

4- If you are referring to the Filters like Sort by popularity, low and high price etc then these are default WooCommerce filters and the Theme doesn’t influence them. To add anything in them requires Customization.

Whereas, if you want to use the Shop filters area of the Theme then you can go to Dashboard > Appearance > Widgets > Shop filters > there you can add your choice of Widgets > then go to Dashboard > Theme Settings > Product archive > Shop filters > there enable it and these custom filters will then show above Products separately other than the Sidebar: https://ibb.co/kqpWTwS

5- Sorry but there is no option in Theme Settings available for that. It requires Customization and this is beyond our limitations and support policy scope. Hope you can understand our limitations.

Although, you can do the styling for the Buttons under the Theme Settings > Styles and colors > Buttons: https://xtemos.com/wp-content/uploads/2020/09/buttons-wd-7.jpg

6- The Box Shadow under the Header is defined with the following CSS right now:

.whb-with-shadow {
    box-shadow: 0 1px 8px rgb(0 0 0 / 10%) !important;
}

So, you can amend this CSS by changing the values according to your choice which best suits you and then paste it under the Dashboard >> Theme Settings >> Custom CSS >> Global CSS section.

The syntax followed in the above CSS is in the following pattern:
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

7- To have that sort of carousel text in the Header, you need to go to Dashboard > HTML Blocks > there create a Block with the Page Builder plugin active on your Site > in that Block use the Information Box Carousel element of the Theme: https://ibb.co/RpmtkYh

After successful creation of the HTML Block doing mandatory amendments, you can then go to your Header Builder > there add the HTML Block element in the Top Bar > and select the Block you just created: https://ibb.co/Nsgq5Fk

This is how you can have that Carousel sort of Text.

8- We have applied the following CSS to make the Menu adjustments like you mentioned. Here is the CSS applied in this regard on your Site:

.wd-nav[class*="wd-style-"]>li:is(.current-menu-item,.wd-active,.active)>a {
    background-color: #449827 !important;
    color: #fff !important;
    border-radius: 4px !important;
    border-width: 0 !important;
    padding: 15px !important;
}

.wd-nav-main>li>a:hover {
    background-color: #449827 !important;
    color: #fff !important;
    border-radius: 4px !important;
    border-width: 0 !important;
    padding: 15px !important;
    margin: 0 5px !important;
}

9- If the mentioned Content is specifically wanted to be added on your Site for the Shop or Category pages, you will need to create a Custom Shop page Layout using the Theme’s Layout Builder because the default WooCommerce Shop and Category pages aren’t editable with the Page Builder plugin.

Here is the Guide where you can read about that:
https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

10- Regarding the Language Switcher, you would need to use a third party Translation Plugin in this regard on your Site. We would recommend you to use the WPML plugin. Here is the Guide from the Documentation in this regard:
https://xtemos.com/docs-topic/how-to-use-wpml-with-woodmart/
https://xtemos.com/docs-topic/how-to-make-woodmart-multilingual-with-wpml/

Further, regarding knowing more about the Translation please check out the Theme Documentation guide: https://xtemos.com/docs-topic/theme-translation/

Hope we have addressed all your concerns !

Best Regards

Many thanks for your reply Aizaz, it helped me enormously!
I have tested some things, i noticed there is still something wrong with the top header when I’m adding html block i created with elementor
it breaks all the other parts of top header (on the left side it shows broken, the right side is not even visible)
and the carousel is not rotating at all , even though i have set loop and autoplay..
could you please check this?
Thanks!

sorry, also i wanted to understand how do i add more information like contact details (phone number email etc) in the mobile menu under main menu, language switcher, “my account” ,
thanks!

and last question about removing items from cart on mobile,
it seems that it’s very annoying to remove items from cart on mobile because when you click on “x” and it does not react, you click second time and you end up going to the product page , then you go back to cart and you try to remove it again, it’s kinda annoying, dont know if you can replicate this on your end?
is there a way to activate “slide product to left” so that delete button appears? or something that can make life easier than to try to click “x” 🙂
Thanks

or maybe the button “x” must be bigger? maybe it can be highlighted so visitor understands he clicks on “remove”?

and one last thing, on desktop we have been able to align product titles, prices and add to cart buttons, images are centred, all good here 🙂
however on mobile, when the title is 1 line and the product next to it has title of 2 lines, then the add to cart buttons are not aligned, how can we fix this please? see image
thanks and wish you a good night!

with image now

Attachments:

You must be logged in to view attached files.

Hello,

1- Regarding the Header Top concern, the thing is actually the amount of elements that have been added on your Header Top are a bit much for it which is why it is a bit difficult to adjust it accordingly.

So, we would suggest you to use minimal Items in Header Top if you are using HTML Block because it works on Flex so when you add Items in it then it adjusts them accordingly with the available space. Hope you can understand.

2- Regarding the Language Switcher under the Mobile Menu, it is already being added on your Site for which you just need to enable the option of Show WPML languages that can be found under the Mobile Menu element under the Header Builder.

Regarding adding more Items in the Mobile Menu, the thing is it is using the Menu to show on it. So, you can go to Dashboard > Appearance > Menus > there you can add Menu Items or Custom Links and it will then appear in the Mobile Menu of your Site.

3- Regarding removing the Items from the Cart, we have checked it on real time Mobile. The items were removed the first time and we didn’t find any issues with that.

4- Regarding the Product title adjustment for the Mobile view, we have applied the following Custom CSS on your Site under the Dashboard > Theme Settings > Custom CSS > Custom CSS for mobile:

.product-element-bottom {
    height: 11em !important;
}

This adjusted the Product bottom and made them in one line.

Best Regards

[Author]

Posts