Remove text The Shop from WooCommerce shop page

Nicra3 · March 24, 2019, 10:05am

Hi

Can you please let me know how to remove ‘The Shop’ from the main shop page. It seems that in previous versions there was an option to change name or leave it blank (in the customiser). This option now seems to have been removed.

Also I would like to add a block of color where The Shop was as well as adding my own title to it. It seems as this can’t be done in Pro. Does it need to be placed in additional css? If so could you please let me know what that code would be? (box 200px high, full width, text vertically and horizontally centred, box color (46,46,46), text color (0,0,0), text size 3em.

Website URL is www.found.rest, page is Shop.

Many thanks

Craig

nabeel · March 24, 2019, 11:22am

Hi Craig,

Thank you for reaching out to us. If you’re using Pro Headers and assigned a header globally, changing the shop title option will not be visible. To change the text, you must disable the header first then go to Pro > Theme Options > Icon (since you’re using Icon stack), under Shop Options change the Shop Tile (see screenshot)

You can reassign the header again after changing the text. To give it a background color, you can add the following code in the Theme Options > CSS:

header.entry-header.shop {
    background: #32d9dd;
    padding: 20px;
}
header.entry-header.shop h1 {
    margin: 0 auto !important;
    padding: 0 !important;
    color: #000;
    font-size: 3em !important;
}

Change the colors as per your need. Hope this helps!

Nicra3 · March 25, 2019, 2:00am

Thanks so much. This is a big help.

I have implemented these and there is now only one small adjustment I would like to make.

The characteristic of the website is that the color bars are right across the page - no gap above or to the side. What code do I need to add to add to make the bar (as detailed above) go right across the page with no container. I would like the color to reach to the bottom of the slider and to the edges of the page.

Thanks again
Craig

thai · March 25, 2019, 3:36am

Hi Craig,

Please also add this custom CSS:

@media (min-width: 980px){
    .post-type-archive-product .x-container.max.width.offset-top.offset-bottom {
        width: 100%;
        margin-top: 0;
    }
    .woocommerce-ordering {
        margin-left: 6%;
    }
    .woocommerce-result-count {
        margin-right: 6%;
    }

    .woocommerce ul.products {
        width: 88%;
        margin: 0 auto;
    }
}

Hope it helps

Nicra3 · March 25, 2019, 4:54am

Hi

Thanks again.

We are getting there - however still some adjustments needed.

I have the top margin working. However the side margins, as well as the entire code for this media block is not flexing. When it gets too wide the left and right margin show as white again. When it gets too narrow all of the code becomes redundant. It is live on the website now - www.found.rest/store so you can see what I mean.

I’m sorry I just have no clue when it comes to coding these things. I very much appreciate your help.

Thanks again.

Craig

paul.r · March 25, 2019, 5:57am

Hi Craig,

Please add max-width:100%; to your container. To do that, change the code above with this

@media (min-width: 980px){
    .post-type-archive-product .x-container.max.width.offset-top.offset-bottom {
        width: 100%;
        margin-top: 0;
        max-width:100%;
    }
    .woocommerce-ordering {
        margin-left: 6%;
    }
    .woocommerce-result-count {
        margin-right: 6%;
    }

    .woocommerce ul.products {
        width: 88%;
        margin: 0 auto;
    }
}

Nicra3 · March 25, 2019, 6:27am

Thanks for your reply.

That has fixed the flex at the wide end. However there is a point as it shrinks that the bar disappears. I can find no logical reason in the code for this. Again this is evident on the live website.

Craig

thai · March 25, 2019, 7:53am

Hi Craig,

You forgot to add the curly bracket (}) in your custom CSS. Please find this custom CSS:

@media (min-width: 768px) and (max-width:979px) {
    .page-id-25 .card .x-card-outer .x-card-inner {
        min-height:270px;
        font-size: xx-small;
    }
}

@media (min-width: 980px) and (max-width:1199px) {
    .page-id-25 .card .x-card-outer .x-card-inner {
        min-height:300px;
        font-size: x-small;
    }
}

@media (min-width: 1200px) and (max-width:4000px) {
    .page-id-25 .card .x-card-outer .x-card-inner {
        min-height:420px;
    }

    .site {
        background: transparent!important;
    }

    .site > .x-container-fluid {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 40px 6%;
        background-color: rgba(255,255,255,0);
    }

    @media (min-width: 481px) and (max-width:767px) {
        .header {
            padding-right:0px;
        }
    }

    header.entry-header.shop {
        background: #464646;
        padding: 100px;
    }

    header.entry-header.shop h1 {
        margin: 0 auto !important;
        padding: 0 !important;
        font-weight: lighter;
        color: rgb(255,255,255);
        font-size: 3em !important;
    }

    @media (min-width: 960px) {
        .post-type-archive-product .x-container.max.width.offset-top.offset-bottom {
            width:100%;
            margin-top: -1px;
            max-width: 100%;
        }

        .woocommerce-ordering {
            margin-left: 6%;
        }

        .woocommerce-result-count {
            margin-right: 6%;
        }

        .woocommerce ul.products {
            width: 88%;
            margin: 0 auto;
        }
    }

And change to this:

@media (min-width: 768px) and (max-width:979px) {
    .page-id-25 .card .x-card-outer .x-card-inner {
        min-height:270px;
        font-size: xx-small;
    }
}

@media (min-width: 980px) and (max-width:1199px) {
    .page-id-25 .card .x-card-outer .x-card-inner {
        min-height:300px;
        font-size: x-small;
    }
}

@media (min-width: 1200px) and (max-width:4000px) {
    .page-id-25 .card .x-card-outer .x-card-inner {
        min-height:420px;
    }
}

.site {
    background: transparent!important;
}

.site > .x-container-fluid {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 40px 6%;
    background-color: rgba(255,255,255,0);
}

@media (min-width: 481px) and (max-width:767px) {
    .header {
        padding-right:0px;
    }
}

header.entry-header.shop {
    background: #464646;
    padding: 100px;
}

header.entry-header.shop h1 {
    margin: 0 auto !important;
    padding: 0 !important;
    font-weight: lighter;
    color: rgb(255,255,255);
    font-size: 3em !important;
}

@media (min-width: 960px) {
    .post-type-archive-product .x-container.max.width.offset-top.offset-bottom {
        width:100%;
        margin-top: -1px;
        max-width: 100%;
    }

    .woocommerce-ordering {
        margin-left: 6%;
    }

    .woocommerce-result-count {
        margin-right: 6%;
    }

    .woocommerce ul.products {
        width: 88%;
        margin: 0 auto;
    }
}

Hope it helps

Nicra3 · March 25, 2019, 9:34am

Thanks again

I’m a little confused as there is code in your above string that relates to previous alterations. The code specifically for this colour bar begins at the header. string . . .

Anyways I have copied and pasted this new string and it has made some improvement. However when the bar flexes below a certain point, white margins are introduced - above and to the sides (again visible on the live site).

Can you please let me know how these are fixed?

Thank you

Craig

thai · March 25, 2019, 9:58am

Hi Craig,

Would you mind providing us with login credentials(by clicking on the Secure Note button at the bottom) so we can take a closer look? To do this, you can make a post with the following info:

Link login to your site
WordPress Admin username / password

Thanks.

Nicra3 · March 25, 2019, 10:33am

Hi

Here is the detail as requested.
Thanks

jade · March 25, 2019, 11:47am

Hey Craig,

Is it the double scroll bar that you want to get rid off on your site?

If so, that is caused by the excessive bottom margin set to the container settings of the footer.

Kindly edit the footer’s container setting and set the bottom margin from 8 to 0.

Hope this helps.

Nicra3 · March 25, 2019, 12:04pm

Hi Jade

Thanks for picking this up - but no this is not the issue at hand. It is the grey bar just below the slider on the store page. As the page shrinks in size, this grey bar disappears. I do not know what is causing this. The bar is there through CSS as per the assistance from Themeco (code is listed in previous responses on this thread). A failure to resolve this so far caused for a request of login details. These have been provided. Any assistance to resolve this shrinking then disappearing problem is appreciated.

Craig

mldarshana · March 25, 2019, 1:06pm

Hi Craig,

Are you referring to the following Gray section?

If it is, could you please try adding the following CSS rule into your X -> Theme Options -> CSS area and see if that helps.

@media (max-width:768px) {
  .x-container.width {
    width: 100% !important;
  }
}

If not, please provide us with a screenshot of your issue, so that we should be able to assist you accordingly.

Thanks!

Nicra3 · March 25, 2019, 10:34pm

Hi

Thanks for your reply. Unfortunately that hasn’t worked either. Whilst I don’t understand code, it does appear as though there is double up or possibly conflicting code. Possibly as there has been a number of thoughts from different people?

With this in mind, here is the complete code sequence I have been given for this modification:

header.entry-header.shop h1 {
margin: 0 auto !important;
padding: 0 !important;
font-weight: lighter;
color: rgb(255,255,255);
font-size: 3em !important;
}

@media (min-width: 960px) {
.post-type-archive-product .x-container.max.width.offset-top.offset-bottom {
width:100%;
margin-top: -1px;
max-width: 100%;
}

.woocommerce-ordering {
    margin-left: 6%;
}

.woocommerce-result-count {
    margin-right: 6%;
}

.woocommerce ul.products {
    width: 88%;
    margin: 0 auto;
}

}
@media (max-width:768px) {
.x-container.width {
width: 100% !important;
}
}

This is what I am after: A grey bar that runs full width of the page - just as shown below.

The problem is that when the page flexes to a smaller screen the result is as shown below:

As you can see white margins are introduced above and to the side. How can the code that I have pasted above be changed so as these white margins do not appear?

Thanks so much for your persistence.

Craig

thai · March 26, 2019, 4:23am

Hi Craig,

I’ve updated the custom CSS a bit.

Everything looks good now.

Cheers!

Nicra3 · March 26, 2019, 4:47am

Hi Thai

Thanks so much for doing this. It is now just as wanted.

Could I please ask one more favour . . . . could you let me know what the adjustment code would be if I wanted to replace the grey with an image. Dimensions and everything else would be the same.

Thanks again

Craig

paul.r · March 26, 2019, 5:51am

Hi Craig,

To change the background with an image, you can replace the css code that reads

header.entry-header.shop {
    background: #464646;
    padding: 80px;
}

with this

header.entry-header.shop {
    background: url(https://found.rest/wp-content/uploads/2018/11/Little-Bay-Slider.jpg) top center no-repeat;
    padding: 80px;
}

Change https://found.rest/wp-content/uploads/2018/11/Little-Bay-Slider.jpg with the url of your background image

For additional info you refer to the link below

https://www.w3schools.com/css/css_background.asp

Hope this helps

system · April 5, 2019, 5:51am

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