Search Results for 'woodmart-woocommerce-layout-builder'

Hello,

Regarding adding the Custom Section to the Product Archive page, the thing is the default Layout of the Archive page comes from WooCommerce by default so it can’t be edited with Elementor because WooCommerce itself doesn’t allow it.

But under the WoodMart Theme, you can create your own Custom Archive page layout under the Dashboard > Layouts > Products archive and use them on the Archive pages of your Site. Here is the Guide to that: https://xtemos.com/docs-topic/shop-page-builder/

Moreover, to know about the WooCommerce Layout Builder, please read the following Guide:
https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

Best Regards

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

Hello,

Sorry to say but there isn’t a direct option available for that.

But under the WoodMart Theme, you can create a Custom Category page layout using the Theme’s Layout Builder. So, you can use that to create a Custom Category page Layout > and in that you can put things like you want.

Here is the Guide to that: https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

Hope this helps !

Best Regards

Hello,

Regarding editing the Product Archive page, the thing is the default Layout of the Archive page comes from WooCommerce by default so it can’t be edited with Elementor because WooCommerce itself doesn’t allow it.

But under the WoodMart Theme, you can create your own Custom Archive page layout under the Dashboard > Layouts > Products archive and use them on the Archive pages of your Site. Here is the Guide to that: https://xtemos.com/docs-topic/shop-page-builder/

Moreover, to know about the WooCommerce Layout Builder, please read the following Guide:
https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

Best Regards

Hello,

Regarding your concerns that you want to achieve for the Layouts, we would suggest you to once read out about the Theme’s Layout Builder where you can create your Custom Archive, Category, Single Product, Cart and Checkout pages so in that you can align the positions of the Content to your choice. Try using that Custom Layout for the Pages and create your own Custom Layout.

Here is the Guide from the Documentation regarding that: https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

Further, regarding showing the Off Canvas Cart style after adding Products to Cart, you can go to Dashboard > Theme Settings > Shop > Shopping Cart Widget > Action after add to cart > in that select Display Widget: https://ibb.co/fttncSQ

If there is something more that we have missed you to assist with then you can mention it further. We’ll try to help you out in the best possible manner.

Best Regards

Hello,

2- Regarding the specific Tabs not showing the thing was, under the Dashboard > Layouts > Single Product > you have made a Custom Single Product layout which is why those Custom Tabs weren’t showing: https://ibb.co/zm2DTTL

So, when we are turning that Layout off then the Custom Tabs are showing fine.

4- Regarding editing the Product, the thing is the default Layout of the Single Product page comes from WooCommerce by default so it can’t be edited with Elementor because WooCommerce itself doesn’t allow it.

But under the WoodMart Theme, you can create your own Custom Single Product layout which we just mentioned in the 2nd point to you. You can read about it here: https://xtemos.com/docs-topic/single-product-page-builder/

Moreover, to know about the WooCommerce Layout Builder, please read the following Guide:
https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

Further, if you don’t create Custom Layout then you can specifically edit the Product Description with Page Builder too: https://ibb.co/H2vt03S, https://ibb.co/VQDk8GP

Best Regards

Hello,

Sorry to say but it is quite difficult to change the position of the Pay Buttons that you mentioned using the Custom CSS because by default the WooCommerce Checkout page Layout is used on the Checkout page and in that Layout, everything is adjusted to their position accordingly. So, if we try to adjust this through Custom CSS then it would be correctly possible and will mess-up the layout and wouldn’t look good.

So, it would be better if you can try using the Theme’s Layout Builder to create your own Custom Checkout Page Layout and then in that you can try putting the mentioned Pay Buttons element to your required position.

Here is the Guide to that:
https://xtemos.com/docs-topic/checkout-page-builder/

If those Buttons are appearing on your Site using any Widget, Element or Custom HTML then you can use them under the Custom Checkout page Layout but if they are appearing dynamically by just configuring the Plugin Settings then it wouldn’t be correctly possible to adjust their position. Hope you can understand the limitations in this regard.

Further, regarding knowing more about the Theme’s Layout Builder, please check the following Guide:
https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

Hope this helps !

Best Regards.

Hello,

Sorry to say but it is quite difficult to change the position of the Sections that you mentioned under the default WooCommerce Single Product Layout because every other thing in this Layout is adjusted to their position accordingly. So, if we try to adjust this through Custom CSS then it would mess-up the layout and wouldn’t look good.

So, it would be better if you can use the Theme’s Custom Single Product Builder to create your own Custom Single Product Layout and then in that you can put the mentioned Section to your required position.

Here is the Guide to that:
https://xtemos.com/docs-topic/single-product-page-builder/

Further, regarding knowing more about the Theme’s Layout Builder, please check the following Guide:
https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

Hope this helps !

Best Regards

Hello,

Sorry to say but the Theme uses the default WooCommerce Templates for Cart and Checkout pages, for which you can create Custom Layouts using the Theme’s Layout Builder (https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/) but that specific mentioned request of yours requires Customization as there is no option in Theme Settings available for that. This is beyond our limitations and Support policy scope. Hope you can understand our limitations.

Although, regarding the Account creation option on the Checkout pages, you can check out the options available under the Dashboard > WooCommerce > Settings > Accounts & Privacy tab > there you can find those: https://ibb.co/Mn93Bxm

Best Regards

[Luke Nielsen]

Hello,

The thing is that the default product template from WooCommerce cannot be edited via Elementor, also I see that you are using the old version of the theme therefore you don’t have the Layout builder that gives you the possibility to edit the product page (check the below manual).

https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

You should update your theme to the latest update and edit the product page using Layouts builder.

Also, you can flood us with any amount of questions you have.

Kind Regards

• This reply was modified 2 years, 8 months ago by Luke Nielsen.

Hello,

Sorry for the inconvenience caused.

Actually, the Filters don’t work on Custom Pages. They only work on default WooCommerce Archive and Category pages which is why when you are selecting any Filter on your Custom pages, it is redirecting to the Shop or Category page.

To achieve what you are mentioning regarding the Sales and New Products pages, it would be better if you could create Categories for Sales and New Products under the Dashboard > Products > Categories.

Then you can tag Products in them accordingly > after that when you visit those Category Pages you would find those Products only on those Pages and the Filters will work accordingly on those.

Moreover, under the WoodMart Theme you can create Custom Layouts for Archive, Category or Single Product pages by going to the Dashboard > Layouts. To know how you can use that feature on your Site, please check the following Guide: https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

Hope this helps !

Best Regards

Hello,

The WoodMart Theme has the option of Custom Layout Builder through which you can create Custom Archive, Category, Single Product, Checkout and Cart pages.

You can read about it here: https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

The Layout can be made under the Dashboard > Layouts > Checkout.

Best Regards.

Hello,

1- You can try out the following Custom Selector in this regard on your Site under the Dashboard > Theme Settings > Typography > Advanced > + Add Rule > in that you need to select Custom Selector > then you need to paste the below-given CSS class:

.wd-tabs-header .wd-nav-tabs-wrapper ul li a span

After that you can set the Font adjustments accordingly. See this image for reference: https://ibb.co/5sQpmT3

For the Single big Tab header title, you can try out the following Custom Selector:

.wd-tabs-header .tabs-name .tabs-text

To use this for Font adjustment, the same above method needs to be followed for this too.

2- Actually, that Trust Badge Image is added through using the Custom Single Product Layout that you can make under the Dashboard > Layouts > Single Product using the Theme’s Layout Builder.

You can get more information regarding that here: https://xtemos.com/docs-topic/single-product-page-builder/
https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

Here is the Image link that was used: https://blackpearlspro.com/woodmart_support/wp-content/uploads/2022/09/guaranteed-safe-checkout-bordered.jpg

And under the Custom Single Product Layout, the Image or SVG Theme element was used to add that: https://ibb.co/9ZB8Q7s

Best Regards.

Hello,

1. The “Page title size” option adds indentations according to the names of the values.

https://monosnap.com/file/HaCWq2UqEiTlD7g6rRWonuC8nui5UH

2. I will send your suggestion to the team, they will consider it.

3. You can add to the “Checkout” any custom button by using the Layout builder, here is our documentation on how to use it:

https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

https://monosnap.com/file/v9Nb7ZbNBHnuVuqAWDJHMp2PVNaYqs

Also, you can add the Cross-sells functionality to the products (Cross-sells are products that you promote in the cart), more information in the below article:

https://woocommerce.com/document/related-products-up-sells-and-cross-sells/#section-2

4. Check the below video for a better understanding of where it is.

https://monosnap.com/file/FwbeTWgZWznaW8cKbF98nUMW9RL6oH

Kind Regards

Hello,

The Sorting and Pagination options that you are trying to have on your Page is specifically related to Shop and Category pages. So, they might not be available for simple pages.

For the Simple page, you can have Product Filters element: https://ibb.co/jDTgKYQ
This doesn’t have Default Sorting options or Grid/List views option, just the Categories Attributes, Stock, Price and Orderby.

So, if you want to have default WooCommerce Filters we would suggest you to try creating the Archive Layout using the Theme’s Layout Builder under the Dashboard > Layouts > Products Archive.

Check out the Guide regarding that here: https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

Best Regards

Hello,

If by Sale Page, you mean the Page where you can find all the Products that are on Sale then we would recommend you to create a Category named “Sale” on your Site under the Dashboard > Products > Categories.

Then tag all the Sale Products in that Category > and then when you view that Category page you would’ve all the Sale Products there.

Further, the Theme provides the option of creating Custom WooCommerce Layouts using the Theme’s Layout Builder. You can check the Guide regarding that here: https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

Hope this helps !

Best Regards

Hello,

Please read the below documentation on how to use the Layout builder:

https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

Feel free to reach out so we can discuss possible options moving forward.

Kind Regards

Hello,

By default, the Single Product Page comes from WooCommerce so you can’t edit it directly with the Page Builder plugin (i.e. either Elementor or WPBakery).

Although, you can create Custom Single Product Layout for the Product page under the WoodMart Theme by using the Layout Builder of the Theme. You can follow the Guidelines here regarding this: https://xtemos.com/docs-topic/single-product-page-builder/

For more info regarding the Theme’s Layout Builder, please check the following Theme Documentation Guidelines: https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

Moreover, you can also access the options related to Single Product page by going to the Dashboard > Theme Settings > Single Product: https://xtemos.com/wp-content/uploads/2020/09/single-product-wd-7.jpg

Best Regards

Hello,

By default, the Single Product Page comes from WooCommerce so you can’t edit it directly with the Page Builder plugin (i.e. either Elementor or WPBakery).

Although, you can create Custom Single Product Layout for the Product page under the WoodMart Theme by using the Layout Builder of the Theme. You can follow the Guidelines here regarding this: https://xtemos.com/docs-topic/single-product-page-builder/

For more info regarding the Theme’s Layout Builder, please check the following Theme Documentation Guidelines: https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

Moreover, you can also access the options related to Single Product page by going to the Dashboard > Theme Settings > Single Product: https://xtemos.com/wp-content/uploads/2020/09/single-product-wd-7.jpg

Best Regards

Hello,

Sorry to say but as you know the default Single Product Page Layout comes from WooCommerce by default. So, if we try to use CSS here for the mentioned 3 elements regarding moving up it would mess up the Product Page default Layout because every Content has its defined position.

So, you can try using the WoodMart WooCommerce Layout builder to create a Custom Single Product page Layout and in that you can add the widgets to your required position.

Here are the links from the Documentation regarding their Guides, please check these:

https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/
https://xtemos.com/docs-topic/single-product-page-builder/

Hope this helps !

Best Regards

Hello,

In our demo, the product page was built using Layout builder so the position of the “Frequently Bought Together” section was adjusted via page builder.

Here is our documentation on how to use it:

https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

Kind Regards

Hello,

1. You are using the default Shop page from WooCommerce therefore we cannot influent the product grid there. You can build such a design via Layout builder.

https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

2. Please follow the below documentation on how to upload the translation.

https://xtemos.com/docs-topic/theme-translation/

Let me know if you have any questions, I’d be happy to answer them.

Kind Regards

Hello,

Could you please check how it works with the default WordPress theme? Just to understand whether the issue with theme or not.

I suggest using our Layout builder for the Archive page. Here is our documentation on how to use it:

https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

Kind Regards

Hey Elise,

Thanks a lot for your reply. To clarify (I am not sure if we talk about the exact same thing), I meant the layouts you provide out of the box in WoodMart e.g. the look of the category archive page, the look of the product detail page.

There is the Layout Bilder, but I don’t have to use it at all. Instead I could just use WoodMart as is and only change some settings in the Theme settings. For customization, I could add custom fields with webhooks in functions.php. E.g. add a custom field below the price in the product detailed page.
https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

But then I learned about the Layout Builder. I see you also have predefined layouts in the Layout Builder.

That’s my question: If I pick the Layout Builder will I be able to get all the same features that come with WoodMart default usage (when I use WoodMart without Layout Builder)?

With features I mean things like variation swatches, brand attributes, buy now button, mobile/responsive features, hover features, etc.

My rationale behind this: If I just want to do very small customizations, e.g. just add a single custom text field below the price, I could just use web hooks. However, if I want to do more customizations, it’s better to just design my own layout with the Layout Builder.

Thanks again for you help!

Markus

Hello,

Thank you for the admin access. I understood that you have tried to edit the default “Shop” page that comes from WooCommerce, therefore this page cannot be edited by its nature, unfortunately. If you want to create your own template for the “Shop” page, I suggest you use our Layout builder (Dashboard -> Layouts).

Please read our documentation on how to use Layouts for building your own shop template:

https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

I’d be happy to assist if you have any other questions or concerns.

Kind Regards

“Please check this manual and create a new checkout from scratch, please remove the webhook: https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/ It is not applicable in this case.”

I have tried all ways but it doesn’t work please make me a form in “Checkout top content”.

Please reply soon as support ends on 24 Aug 2022.

Hello,

Our developers have checked and seen that you have custom JS with an error: https://prnt.sc/24FPpiT6ma2T Please correct that.

Please check this manual and create new checkout from scratch, please remove webhooks: https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/ in this case they are not applicable.

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

Best Regards

Hello,

If you create a layout and published it, it automatically activates for the appropriate page. Also, if the layout is a draft, it would not be activated (https://prnt.sc/M2JR_GLQq3fM).

Here is our documentation on how to use layouts:

https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

Please let us know if there is anything further we can assist you with!

Kind Regards

Hello,

We’re thrilled that you’ve joined us.

1. The “Shop” page you can build through the layout builder in Dashboard -> Layouts.

Here is our documentation on how to use Layout builder:

https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

2. In order to adjust the popup, navigate to Theme Settings -> General -> Promo popup.

https://prnt.sc/4z1XtmhBSUAc

Please let me know if you have any further questions in the meantime.

Kind Regards

Hello,

Yep, you can customize these pages through Dashboard -> Layouts.

https://prnt.sc/2zU6fPg7DzPn

Here is our documentation on how to use the Layout builder:

https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

Don’t hesitate to let me know if you need any further help or any other info.

Kind Regards