Template for WooCommerce

Support
#1

Hi There

I would like to ask you, if you have any cool X-Templates for a WooCommerce Shop which I could build with Cornerstone?

Thanks for your help!

#2

Hey Felix,

The feature you’ve described could only be possible using a theme layout builder. Regretfully, we currently do not have such a feature yet. There is a plan for it though. See https://theme.co/apex/forum/t/status-report-february-1-2019/52222

Please stay tuned for updates.

Thanks.

#3

Hi Christian

Thank you very much for your reply. Does it mean, at the moment it is not possible to implement WooCommerce in a X-Template? I have already startet to implement WooCommerce in Integrity. Looks like this:
https://shop.boutiquedanoise.showmyproject.ch/produkt/base-for-kubus-8-black/

But where on my website is the shop, with the shopping-basket in the menu etc.? How can I remove the sidebar on the shopping basket page:
https://shop.boutiquedanoise.showmyproject.ch/warenkorb/

I also would like to customise the display of the images for the product gallery…

Do you have any Video-Tutorials with X-Theme and WooCommerce?

Thank you very much for your help.

#4

Yes, there is currently no shop page customization. That would currently need WooCommerce custom development. That means you’ll be working on overriding PHP files. If you’re interested with custom coding WooCommerce templates, please see this documentation: https://docs.woocommerce.com/document/template-structure/

The shopping basket or the cart in the menu can be enabled in X > Theme Options > WooCommerce. Enable the Navbar Menu and configure the rest of the WooCommerce Navbar options.

To remove the sidebar in your Cart page, edit the Cart page and set the Page Attributes > Template to Layout - Fullwidth. See https://en.support.wordpress.com/pages/page-options/

Thanks.

#5

Hi Christian

Thank you very much for your help. Customizing coding WooCommerce templates sounds very complicated to me. Sorry, I am only a designer. I don’t think I will be able to manage this.

Thanks anyway!

#6

You’re most welcome!

#7

Hi There

I really like your X-Theme Integrity so I try to set up my WooCommerce shop wit X!

Now I have noticed that the site link color is displayed on the “home” page as a 4px thick line under the Revolution slider.

I never had this noticed before. Any idea, how I could remove this line?

Thank you very much for your help.

#8

Hi Felix,

To remove that border, please add this custom CSS under Theme Options > CSS:

.x-slider-container.below {
    border: none;
}

Hope it helps :slight_smile:

#9

Hi thai

Works perfect!

Thank you very much for your great support.

#10

You’re most welcome!

#11

Hi there

Is there any possibility to give the message bar (blue) in the shop some ohter color with CSS?

I also would like do Display the shop pages on the full width as the rest of the website is. I have set the WooCommerce Page on “full width” but there is still some white space left and right of the content.

Thank you very much for your help!

#12

Hi Felix,

Please also add this custom CSS:

.single-product .x-container.max.width {
    width: 100%;
}
.single-product .entry-wrap {
    padding-left: 0;
    padding-right: 0;
}

Hope it helps :slight_smile:

#13

Hi thai

That’s perfect! Thank you very much.

Sorry to ask, but what would the CSS be for the same result on the “check-out” page and the “my account” page? Or better - on any Shop page?

Can I see anywhere for which page I have to use which class (like “.single-product .x-container.max.width”)?

Thanks again!

#14

Hello Fellix,

Thanks for updating the thread. :slight_smile:

You can add following CSS under X > Theme Options > CSS:

.woocommerce-cart .x-container.max.width, .woocommerce-account .x-container.max.width{
    width: 100%;
}

.woocommerce-cart .entry-wrap, .woocommerce-account .entry-wrap {
    padding-left: 0;
    padding-right: 0;
}

You can use Chrome dev tools to find out the classes or relevent CSS for the same. Please take a look at following resource to get started.

Thanks.

#15

Hi Prasant

WOW, this is a great Tool! Thank you very much for this important info!

I have tyed to Change the blue color of the info bar at the check-out page to grey:
https://www.shop.boutiquedanoise.showmyproject.ch/kasse/

I have tryed this CSS but it woult have been too good, if this would have worked :wink:

What did I do wrong?

.woocommerce-info .x-alert-block .x-alert-info, .buddypress #message.info, .bbp-template-notice.info {
background-color: #d0d3d4;
border-color: #f5fbfd;
color: #203a44;
}

Thank you very much for your help!

#16

Hi,

The class are on the <div> so there should no spaces for .woocommerce-info.x-alert-block.x-alert-info

Please change your code to this.

.woocommerce-info.x-alert-block.x-alert-info, 
.buddypress #message.info, 
.bbp-template-notice.info {
    background-color: #d0d3d4;
    border-color: #f5fbfd;
    color: #203a44;
}

Thanks

#17

Hi Paul

Thank you very much for your help. This works perfect!

Great Support!

#18

You’re welcome! :slight_smile:

#19

This seems like a somewhat easily achieved feature that would have a huge impact on the diversity and utility of the theme. I know it’s not quite as simple as this but couldn’t you (apex) use WooCommerce hooks to remove all content from the single product page template and dump your content in the woocommerce_before_single_product output? Then you could add a section under the Pro/X menu that opens the editor with WooCommerce shortcodes (product title, price, etc.) in the elements tab. That would allow the user to use the page editor to “customize” the template. You could probably do the same for the other WooCommerce pages (store, my account, checkout, cart, and archive).

#20

Thanks for your feedback, @websencia. As support staff, we’re not in the position to comment regarding product development. Please check out the Layout Builder and Directive Parsing features once they’re released to see if what you need would be achievable. For more details, please see https://theme.co/apex/forum/t/status-report-july-31-2018/39909

Thanks.