Several errors related to WooCommerce

Hi team,

I´m having some issues with my WooCommerce pages and widgets. There are several, but I´ll just describe the most important ones for now, as maybe the solution for them will fix other minor issues. I use Elementor to build my website, I´m guessing this is a problem or the X Theme overriding the Elementor functions, as I never had this issues before with other themes.

  • The products displayed in my Store page don´t display the title nor the price of the product. This is problem I already had before and now it´s back. I´ll attach a list of all the CSS code lines I have running on my site right now, all those lines were provided by your team, as I don´t have any coding skills.
    Please click this link and scroll down the page to find the WooCommerce products list: https://maleoptimization.com/tienda/

body .format-standard .entry-wrap {
background:#4c4c4c !important;
}

/* BLOG POSTS FONTS - TITLES AND CONTENT TO WHITE */

.single-post .entry-title{
color:#FFF;
}

.single-post .entry-content{
color:#FFF;
}

/* BACKGROUND COLOR CUSTOMIZATION OF THEME´S NAVBAR, SIDEBAR AND FOOTER */

.x-navbar {
background-color: #050609;
}
.x-sidebar {
background-color: #050609;
}
.x-colophon.top, .x-colophon.bottom {
background-color: #050609;
}

/* BACKGROUND COLOR OF BLOG´S COMMENT BOX */

.single-post .site {
background-color: #4c4c4c;
}

/* COLOR CUSTOMIZATION FOR LINK´S FONTS, BOTH NORMAL AND HOVER */

.format-standard .entry-title a{
color: rgb(0,125,232) !important;
}

.format-standard .entry-title a:hover{
color: rgb(246,45,162) !important;
}

/* FIX FOR QUOTATION BOXES´ DISPLAY PROBLEMS */

.format-standard blockquote,
.format-standard .x-toc,
.format-standard .entry-content a.x-img-thumbnail:hover {
border-color: transparent;
}

/* REMOVING THE WHITE GAP IN HOMEPAGE */

.hentry .entry-wrap, .search-results .x-container>.product .entry-wrap {
padding: 0px;
}

/* ADJUSTING THE WIDTH OF MY ELEMENTOR´S CONTENT SO IT DOESN´T GET HIDDEN BEHIND THE RIGHT SIDEBAR */

.home .entry-wrap {
padding: 0
}
.home .entry-wrap > .x-container.max {
width: 100%;
max-width: 100%;
}
.home .elementor-section-full_width,
.home .elementor-section-stretched {
width: 100% !important;
position: relative !important;
left: auto !important;
}

/* APPLYING THE SAME AS ABOVE TO OTHER PAGES BY USING THE PAGE´S ID */

.page-id-2224 .entry-wrap {
padding: 0
}
.page-id-2224 .entry-wrap > .x-container.max {
width: 100%;
max-width: 100%;
}

.page-id-2224 .elementor-section-full_width,
.page-id-2224 .elementor-section-stretched {
width: 100% !important;
position: relative !important;
left: auto !important;
}

/* SAME AS ABOVE FOR PAGE ID 2241 */

.page-id-2241 .entry-wrap {
padding: 0
}
.page-id-2241 .entry-wrap > .x-container.max {
width: 100%;
max-width: 100%;
}

.page-id-2241 .elementor-section-full_width,
.page-id-2241 .elementor-section-stretched {
width: 100% !important;
position: relative !important;
left: auto !important;
}

/* REMOVING THE WHITE GAP (IN THE HEADER) FOR ALL PAGES */

.entry-header {
display: none;
}

.entry-content {
margin-top: 0 !important;
}

  • I´m also having several issues with the Single Product Template. It looks very odd, I´m having issues I´ve never had before with other themes. Please find attached a screenshot with several notes: https://imagebin.ca/v/4UkmrL5ogygY

  • If you scroll down in this link: https://maleoptimization.com/product/waterfeel-lubricante-cannabis-150ml/ you will see that the “related products” widgets is not formatted. I tried with all of Elementors adjustments but there was no way to fix it. Again, is very odd because I never had that problem with other themes.

I would appreciate any help I could get with this issues, as I only have until the end of this month to officially launch this website. If you need a temporary admin login in order to tweak some code or change presets please let me know where can I send it securely.

Thanks in advance,
Carlos

Hello Carlos,

Thanks for the very detailed post information.

  1. The product titles and the prices is not showing because you added this custom css:
.entry-header {
  display: none;
}

Remove that css block to resolve this issue.

  1. The single product layouts were replaced with Elementor plugin. Regretfully we are note familiar with this plugin. Without the plugin, you are supposed to have a layout like this: http://demo.theme.co/shop-icon/product/beautiful-band/
    I would recommend that you contact the creators of Elementor plugin and ask them how you can create gaps between columns of your single product page layout.

  2. Again this is related to Elementor’s styling and adjustments. Please temporarily disable the plugin and see how the related products on the single product page were designed built in the theme which can be seen in this demo right here: http://demo.theme.co/shop-icon/product/beautiful-band/

Thank you for your understanding.

Hi @RueNel,

As always, thank you so much for the accurate information.
So, after having ran into several issues concerning the theme overriding Elementor or the other way around, what I´m thinking would work best for me is make some parts of the website 100% X Theme and others 100% Elementor. I´m new to Wordpress, I´ve only been using for three months, so excuse me for the noobie mistakes.

So for now, I want to use 100% just X Theme for my blogs and for the Single Product pages. So I´ll delete the Elementor template and start designing the Single Product page from scratch using the X Theme features.

Could you please tell me how to go about it? Or refer me to some tutorials I can follow as I go?

Thank you so much and have a good weekend,
Carlos

Hi Carlos,

The issue was between Elementor and Woocommerce, and the theme has no capability to edit the product page. It’s only stylized to make it fit to theme’s design. So yes, I’m afraid you couldn’t do that with X theme and builder, what you can do is Woocommerce customization of the template. Please check this https://wordpress.org/support/topic/customising-woocommerce-single-product-page/

Thanks!

Hii @Rad,

I´m sorry but that doesn´t make much sense to me, since this is a template that I was already using in a previous website and it was working perfectly.
All the customizations made in that previous website were done just using Elementor Pro and the theme that was in place was WP Ocean.

Is there a way I can use only Elementor Pro when designing a website, category, etc. that I can make sure that none of the X Theme features are being applied??

Thanks,
Carlos

Hi There,

It’s not possible. Because the style of X theme will apply for all the pages, categories, posts, …

In this case, you have to create blank template for single product page so all the style will NOT load for this template.

For more information, please take a look at this article:

Hope it helps :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.