WooCommerce Shop Page Adjustments

Support
#1

Hi,
Regarding http://rleone.com/shop/

a) How do I completely remove the “Showing all 6 results” box on the upper right hand corner of the page?
b) How do I adjust the color and stroke of each of the 6 boxes?
c) How do I center the name below each image?
d) Is there a way to move the “Select Option” Bar outside of picture so that it is below the name?

Thank you.

#2

Also, do they have to be displayed in alpha order? what about in the order that they’re added?

#3

Hello Robert,

Thanks for writing in!

Do you want to display the product items like this?

If that is the case, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.woocommerce li.product {
    margin-bottom: 4%;
}

.woocommerce-result-count {
    display: none;
}

.woocommerce li.product .entry-header {
    text-align: center;
}

.woocommerce li.product .entry-header .button {
    opacity: 1;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
}

If you want to change the order of the display of the items, you may install this plugin instead:

Hope this helps.

#4

Thank you, that all worked perfect!

Now is there a way to change the size and text of the buttons?
Is there a way to create a gap between the header/nav bar and the top row of images?

#5

Hey Robert,

Please update this code:

to:

.woocommerce li.product .entry-header .button {
    opacity: 1;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    font-size: 18px;
}

Please add this code as well:

.masthead {
    min-height: 200px;
}

Hope this helps.

#6

Thank You! A few followup questions…

  • How do I change the actual text “Read More” on the buttons to something else?
  • The Masthead Code created the gap I wanted but now reveals text “The Shop”. How do I remove that text?
#7

The Masthead code you provided shows the page name on every page now. Is there a way to just create the gap on The Shop page?

#8

Hello Robert,

Thanks for writing in! It turns out that you have set the navbar top height to zero. To resolve your gap issue, please go to X > Theme Options > Header > Navbar and set the “Navbar Top Height” to at least 120 pixels.

To change the Read More button text in your products, please install this plugin:

Hope this helps. Please let us know how it goes.

#9

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