Replacing my present Woocommerce plugin and associated plugins with X Woocommerce

Support
#1

Hi,

I desperately need to change my entire woocommerce shop, checkout, and cart pages. This checkout page image is only the top portion. It is one loooong form, and an example of how bad the rest of the pages are structured:

I’m not sure if I’m understanding this correctly but I believe that your woocommerce package is pre-structured with the exact clean layouts that I need:

I’ve given up looking for css codes that will give me the results that I need – as they are many. I figure a clean install of your package would save me time and headacss :slight_smile:

Also, as you can see from this screenshots, I have several plugins that work in conjunction with the Woocommerce Plugin:

My concern is that by purchasing X-Woocommerce these plugins will interfere somehow. If it’s just a matter of deactivating then deleting them…that’s fine.

Finally, I plan to install a mirror of my site in order to test X-Woocommerce. I just need to know if converting will produce what I need.

Your help is much appreciated,
Orlando

#2

Hello @incywincies,

Thanks for asking. :slight_smile:

First, there is no need to purchase WooCommerce (it’s free plugin by Automattic) or any of X Theme plugins as bundled plugins are free for Themeco customers. On the other hand CSS and styling on your website (screenshot) are looking good.

In case you want to change the Checkout process, please install Woo Checkout Editor plugin from Pro > Validation > Extensions.

Having said that if you could let us know the specific CSS changes you are looking for, maybe we can point you in right direction towards making those customizations.

Thanks.

#3

Hi Prasant,

Thank you for your reply. I believe I looked at this Checkout Editor and found that it didn’t create columns, or separate sections as cleanly as I’m hoping for. But, i will look into it further.

I just want the page to look and feel more user friendly. To begin with, a customer has to scroll from top to bottom to complete the checkout process. If I were able to create sections like this image…I would be half way there:

My other issue would be my shop page…It’s an eye-sore. See for yourself:

I would just like to have boxes/frames separating products and not sure what’s with the yellow highlighting. I sure didn’t put it there :slightly_smiling_face:

This is why this format or something similar appealed to me and it’s from your site:

So, I’m hoping I can at least start with the checkout page and go from there because it’s so long.

Btw, I appreciate your comment on the present css styling. Have no idea what I’m doing.

Very much appreciated,
Orlando

#4

Hi Orlando,

Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. We do have an in-house custom development team that offer paid services, who may be able to assist. They can be contacted at pinnacle@theme.co if this is of interest to you. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

#5

Hi Paul,

Thanks for the reply. Well, would you at least have a css code that will give me 2 columns instead of 1 long one. Perhaps, one column for Billing Details and another for Order Details." Hopefully, this is not outside of your support since Prasant offer a little help on css.

I will inquire to the development team at pinnacle@theme.co

Thank you,
Orlando

#6

Hi Orlando,

We would be able to provide minor CSS code suggestions but based on the screenshot that you have linked for the checkout editor, it would take quite a bit of customization since the template for the checkout page for X is structured differently. With this, it would be best to get in touch with a developer to do the changes that you require.

Thank you for understanding.

#7

Hi,

Ok, I honestly wasn’t expecting too much customization. I would settle for just 2 columns.

In between our communications I ran across this code that was provided by one of your staff. It’s why I thought you guys could walk me through this :

I added the code via Appearance > Customize > Custom > Edit GLOBAL CSS, but didn’t see any change.

This is how the code looks on Global CSS:

If you can at least tell me if I added it correctly I’d appreciate it.

Thank you,
Orlando

#8

Hi Orlando,

There is missing close curly bracket } to close your @media
before this line of code

.col2-set .col-1, .col2-set .col-2

Code should be

.woocommerce li.product .entry-featured img {
     min-width:100px;
     max-width:100%;
     width:auto;
}
} /* <- this bracket is missing */

.col2-set .col-1,
.col2-set .col-2 {
     float:left;
     width: 49%;
     margin-right: 2%;
}

.col2-set  .col-2 {
     margin-right:0;
}

.col2-set .col-2 h3 {
     margin-top:0 !important;
}

Hope that helps

#9

Hi,

I added the code via Pro > Theme Optios > CSS as you suggested but received this message:

Here is the entire and only CSS code on that page with the extra bracket:

Did I add it correctly?

Thank you,
Orlando

#10

Hi Orlando,

Yes you have added it correctly.

As for the other error, try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Thanks

#11

Hi Paul,

Hmm - ok, but with so many plugins it’s going to be hard to tell which is the culprit especially when I’m in the Theme Options panel. Maybe I can open a new window or something or start deactivating plugins.

Would you happen to have an idea of how I can narrow it down some?

I can’t believe I’m wasting so much of yours and my time just so I can have 2 columns in my checkout page.

Orlando

#12

Hi Orlando,

I took the liberty of logging in to your site using the details you have posted on the other thread to check your setup on why the code you have added is not working.

First, when I checked the Theme Options panel, I did not seem the same error that you have cited in your previous response. Also, the code for the columns are not there but based on your other response, you have added it and adding the closing } should fix the code.

Now, I tried adding the code:

.col2-set .col-1,
.col2-set .col-2 {
     float:left;
     width: 49%;
     margin-right: 2%;
}

.col2-set  .col-2 {
     margin-right:0;
}

.col2-set .col-2 h3 {
     margin-top:0 !important;
}

And saved the Theme Options without any problem. When I check the site, the code did not take effect initially. This is because you have a caching plugin active on the site which is serving the previous version of the CSS rather than the updated one as what caching plugins do.

I went ahead and cleared the cache and now the checkout page is showing up in two columns. Please double check on your end.

Also, if you are currently developing your site, it would be ideal if you temporarily disable your caching plugin while the site is under development or you will have to keep on clearing the cache after you make some changes on the site.

Hope this helps.

#13

Jade…thank you! Finally :slight_smile:

That blasted cache plugin again :frowning:

I actually brought up the question to my hosting company whether or not it was necessary to have it, considering they have a good in-house caching system.

According to them, the plugin creates a cached copy of my pages which reduces the number of requests that my website makes to the database and improves the overall loading speed and that it wouldn’t hurt to keep it.

However, I’m seeing it can cause conflicts. I’ll have to dig into this more. Meantime, I’ll place a giant reminder post-it on my monitor reminding me to be temporarily disabled while the site’s under development.

I appreciate you going in there and fixing this once and for all. It looks a whole lot better.

Hope this helps someone else down the road.

Thank you,
Orlando

1 Like
#14