Header and WooCommerce Shop Edits

weatherstone · July 1, 2018, 7:19pm

Hello,

I am noticing some issues with my site, a couple of which cannot be explained on my end. Please refer to this screenshot: https://denverhighriseliving.com/wp-content/uploads/2018/07/Condo-Intel-Errors.png. Credentials posted below.

If you scroll up and down a little while watching the buttons in the top right of the header you will notice a slight glitch. It is particularly evident on mobile devices with the collapsed navigation. I cannot find anything in the header settings that would be causing this.
There is a lot of CSS and JS in place that should be causing the right page title to render - it should read “Condo Intel.” I realize this would normally be changed in Theme Options, but take a look and you will find it is missing in mine. This makes me really sad and I never want to use this theme again for any e-commerce projects.
There is code in place to change the font-size of all the text in this little cart widget, but it isn’t affecting the “subtotal.”
There is CSS in place for the bottom margins of these sidebar widget titles, but it doesn’t seem to be affecting this widget title. I want the same space under the title as under the cart title in the widget above.
Is there anyway for the items in this widget to be styled to look like those in the cart widget above? Making the text sans-serif, making it black, having the image on the left and the text on the right?
Is there a way to increase the font size of these product titles?
Can this text be made smaller?
I am trying very hard to style this button like the one above it. I have written a good bit of code but can’t quite seem to finish the job. I wish it were picking up on the default styling… I would like everything centered together with a letter space of two.

You guys should introduce a tipping system on this platform.

Thank you in advance for your assistance!
J

ruenel · July 1, 2018, 9:51pm

Hello There,

Thanks for writing in!

1.) Please edit your header and check the height of the bars. The second bar seems only have 58px. Increase it to 60px;

2.) Your page is entitled “Condo Intel”. If you want to change it, please edit your page title instead.

3.) There is a strong tag in the subtotal. To override the font weight, you can make use of this code:

.widget_shopping_cart strong {
    font-weight: normal;
}

4.) You can resolve this by using this code:

.x-sidebar .widget ul li {
    margin-top: 0;
}

5.) To resolve this issue, you use this code:

.woocommerce-products-compare-widget ul li img {
    float: left;
    margin-left: 0;
    padding: 3px !important;
    float: left;
    width: 65px;
    margin-right: 0.65em;
    box-shadow: none !important;
    border: 1px solid rgba(0,0,0,0.1);
    background-color: #fff;
    -webkit-transition: border 0.3s ease;
    transition: border 0.3s ease;
}

.woocommerce-products-compare-widget ul li,
.woocommerce-products-compare-widget ul li h3 {
    color: hsl(0,0%,0%) !important;    
}

6.) You can increase the font size using this code:

.woocommerce li.product .entry-header h3 a{
    font-size: 16px;
}

7.) To make it smaller, please use this code:

.woocommerce li.product .price,
.woocommerce li.product .entry-header .price>.amount, .woocommerce li.product .entry-header .price>ins>.amount {
    font-size: 14px;
}

8.) You can use this code:

.woocommerce-products-compare-compare-button, 
.woocommerce-products-compare-compare-button a {
    background-color: #000;
    color: #fff;
    margin: 15px;
    padding: 0 7px;
    display: block;
    font-size: 14px;
    text-transform: uppercase;
}

Please keep mind that it has a different structure and styling from the button above. All of the elements of the compare plugin has their own default styling.

weatherstone · July 2, 2018, 2:24am

Hello,

Thank you for your fast reply! Most of your code works perfectly, with just a couple exceptions:

This issue is actually happening on every page. I looked at the bar sizing and it’s set in em, but nothing has changed to explain why there are now issues. I tried adjusting the bar sizes but nothing seems to be fixing the glitch.
This is perfect except that the text is still in the Prata font instead of open sans.
Sadly this code is not working at all, but I also was struggling to style the button. It’s not much better than how I already had it. Any other suggestions?

Separately, I am noticing that on mobile devices the text on the “Compare” button under “Comparison Tool” is all black, making the button unreadable. It’s weird because this is only happening on mobile. Advice?

Thank you!
J

ruenel · July 2, 2018, 3:38am

Hi There,

Thanks for updating in!

1.) This could be a bug in the header. We will inform the developers for further investigation of this issue.

5.) Please update the code and use this:

.woocommerce-products-compare-widget ul li img {
    float: left;
    margin-left: 0;
    padding: 3px !important;
    float: left;
    width: 65px;
    margin-right: 0.65em;
    box-shadow: none !important;
    border: 1px solid rgba(0,0,0,0.1);
    background-color: #fff;
    -webkit-transition: border 0.3s ease;
    transition: border 0.3s ease;
}

.woocommerce-products-compare-widget ul li,
.woocommerce-products-compare-widget ul li h3 {
    color: hsl(0,0%,0%) !important;    
    font-family: "Open Sans", serif;
}

8.) Please make use of this code instead:

.woocommerce-products-compare-compare-button {
    background-color: #000;
    color: #fff;
    margin: 15px;
    padding: 10px 10px;
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    text-align: right;
}

.woocommerce-products-compare-compare-button a {
    display: inline;
    padding: 0;
}

Also remove any occurrence of the previous code to avoid any conflicts and you will have something like this:

Hope this helps.

weatherstone · July 2, 2018, 7:45am

Hello,

Everything is great except for #8, and #9, which I think you missed.

Can the checkbox and “Compare” along with the arrow icon all be centered on the button? No matter how I play with the CSS I cannot seem to make that happen.
Separately, I am noticing that on mobile devices the text on the “Compare” button under “Comparison Tool” is all black, making the button unreadable. It’s weird because this is only happening on mobile. Advice?

Thank you,
J

nico · July 2, 2018, 9:17am

Hi @weatherstone,

1 - Add this in your custom CSS:

.woocommerce-products-compare-compare-button{
    text-align:left;
}
.woocommerce-products-compare-compare-button label {
     margin-left: 32%;
}

2 - I could not replicate the problem here. Would you mind sharing us a screenshot.

Let us know how it goes.

Thanks.

weatherstone · July 2, 2018, 10:07am

Hello,

Thank you for your fast response.

This code is finally mostly working, which is great! I made a few more edits and now am facing three major issues: https://prnt.sc/k1jds7.
a. The first is that the index of most of the “Select to Compare” button is off and it is hidden behind the product. Can that button be brought to the front?
b. The second, related, issue is in regards to the effect that happens upon hover. If there is no way to make the 'Select to Compare" button referenced above also move upon hover? If not, can that effect be removed?
c. Finally, if you click on a product, the same “Select to Compare” button is present but the styling is totally messed up.
Here is a screenshot of the button on mobile: https://prnt.sc/k1j6m9.

Thank you so much!
J

rad · July 2, 2018, 12:58pm

Hi @weatherstone,

Please change this CSS

 .woocommerce-products-compare-compare-button{
    text-align:left;
}

to this

.woocommerce-products-compare-compare-button{
    text-align:left;
    position: relative;
    z-index: 9999999;
}

What styling was messed up? They look all the same when the above CSS is changed. And the compare button will not gonna move since it’s not part of the entire structure. It’s outside where hover happens.

Please add this CSS as well,

a.button.woocommerce-products-compare-widget-compare-button {
    color: #fff !important;
}

Hope these helps

weatherstone · July 2, 2018, 3:33pm

Hello,

Thank you for your response. Please take a look at this screenshot: https://prnt.sc/k1nt2d.

When you hover over the product to click on a button, it reacts to the hover. In particular, it squishes the “Add To Cart” button down on top of the “Select to Compare” button. If you will kindly login, please hover your mouse over the product to see what I am referring to.

Thank you,
J

Alaa · July 2, 2018, 5:08pm

Hi J,

You need to use this CSS code to disable this effect:

.woocommerce li.product:hover .entry-wrap {
    top: auto;
}

Thanks.

system · July 12, 2018, 5:08pm

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