Woocommerce Product Page Customization

[noeldesigns]

Is there a way to easily customize or “cleanup” the woocommerce product page in X-Theme.

Here is a link to the page we want to change.

http://www.stephenblawrence.com/product/dont-feel-like-home/

Our initial goal is to remove the beige banner with “The Shop”

Remove the grid and the right arrow above the product image and text.

And, add the same style menu found on:

http://www.stephenblawrence.com/music

And, to not have the product page open in a new window.

Thanks in advance for the feedback.

[christian]

Hey Grant,

The area where you see “The Shop” title is called the Landmark Header and it houses the title of not only the Shop page but also all archive pages and pages not using the Blank page templates.

Before giving you the code to remove the Landmark Header, I just like to let you know that you can change the Category Archive title to the title of your category. You can do so by editing the Category’s Archive Title.

With all that in mind, if you want to hide the Landmark Header on all WooCommerce Pages, add this code in X > Theme Options > CSS.

.woocommerce .x-header-landmark {
    display: none;
}

If you only wish to hide the Landmark Header on Single Product pages, use this code instead:

.single-product .x-header-landmark {
    display: none;
}

Now for the grid icon, add this code:

.single-product .entry-parent {
    display: none;
}

Since those selectors use the same property, you can combine them to make your CSS smaller like this:

.single-product .x-header-landmark,
.single-product .entry-parent {
    display: none;
}

For the menu, that is not possible since the Shop page is not editable. I’d recommend that you upgrade to our Pro theme so that you get a Header Builder and create a custom header. For mroe details, please see https://theme.co/pro/

Hope that helps.

[noeldesigns]

So far, so brilliant. Works great.

How do we get rid of the right arrow on the page?

Thanks.

[alexander]

Hi Grant,

Glad to hear that’s working for you! The post navigation arrows can be removed with this CSS:

.x-nav-articles {
  display: none;
}

[noeldesigns]

That works. Thanks for all your help

[friech]

We are delighted to assist you with this.

Cheers!