Add space between bar under title & change price color (if possible?)

[Patti]

Hello,

Website: https://dashpatterns.com/wp60/

I searched the Weaver Xtreme Theme Guide & could not find an answer to my question. I would like to add some space between the bar that is under the page title & the product. Is there a specific place to do this? Or do I need to add some custom CSS?

I also want to change the color of the price of my product. I have tried to do it in so many places but none of them have worked. Is this something that can be edited within the Weaver Extreme settings? Would also like for my “Add to Cart” button to be centered under the products. Again I have tried to do it with custom CSS found online over & over again. But nothing I have tried works. Is this something that you could help me with?

Any help would be appreciated,

Patti

[User]

@Patti

Please add the following to the Custom CSS > Additional CSS

To change price color:
.woocommerce .price > .amount {
color: #C30000;
}

To increase padding over product image:
.woocommerce div.product div.images img {
padding-top: 15px;
}

Still working on the others…. 🙂

Regards!

[scrambler]

These are WooCommerce styling, so if they can be changed (like I would assume the price), there would be an option in WooCommerce.

Here is what I have for the space below the bar
.woocommerce div.product div.images img {padding-top:20px;}

Here is the rule WooCommerce is using to set the price button background if you need to change it everywhere (replace red by your color)
.button.add_to_cart_button, .single_add_to_cart_button, .button.product_type_variable, .button.product_type_grouped, .button.product_type_simple, .button.product_type_external{color:red !important}

Centering the button
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {text-align:center;}

If these do not work, Leave the rules in and post back so we can see why they are not and tune them if necessary

[Weaver]

Just FYI, here a number of WooCommerce customizations that can be used via the Weaver Global CSS option. This isn’t a comprehensive list, but covers a lot of buttons and other items that one might like to customize. And, obviously, use the colors you want.

/** WOOCOMMERCE CUSTOMIZATIONS **/

/* shop page product name link */
.woocommerce-loop-product__link:hover {
color: #c5c5c5 !important;
}

/* general shopping buttons */
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button {
font-size: 100%;
padding: .618em 1em;
font-weight: 700;
border-radius: 8px;
color: #515151;
background-color: #ebe9eb;
border: 0;
}

.woocommerce #respond input#submit:hover, .woocommerce a.button:hover,
.woocommerce button.button:hover, .woocommerce input.button:hover {
background-color: #dfdcde;
color: #515151;
}

/* Cart and Checkout Buttons */
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt,
.woocommerce button.button.alt, .woocommerce input.button.alt {
background-color: #C5c5c5;
color: #222222;
}

.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, 
.woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover {
background-color:#70d2ff;
color: #222222;
}

/* - Apply Coupon
*/
coupon .button {
background: #ebe9eb !important; 
color:#515151 !important;
}
.coupon .button:hover { 
background: #dfdcde !important;
}


/* - Price */
.woocommerce-Price-amount {
color: #222222;
font-size: 110% !important;
font-weight: bold !important;
}

/* Woo status messages */
.woocommerce-message {
background: pink !important;
color: green !important;
}

.woocommerce-info { 
background: lightblue !important;
color: black !important;
}


/** WOOCOMMERCE CUSTOMIZATIONS **/

[Patti]

@Scrambler –

Thanks! Some of the CSS worked & some didn’t. I can see that the “Add to Cart” button is centered while I have the Customizer loaded. But when I publish it my site doesn’t reflect the same. Never got any space under the  bar no matter what CSS I used.

@Weaver –

Thanks for the cheat sheet for WooCommerce! I tried a number of them. Just like with the ones that @scrambler sent some worked & some didn’t. Is so frustrating when I can see the changes in when my site’s in Customize & not on the site itself. The hex for the price is supposed to be a dark blue on both the homepage & the quilt page. Yet it’s not showing up as such on the homepage except in the Customizer.

Will wait until tomorrow when my cache clears & look at it again. Hopefully I’ll see the changes that I made tonight on my site.

Patti

[scrambler]

Try this for the space

.woocommerce ul.products li.product a img {padding-top:20px !important;}

Your Add to cart is centered under the image, Do you see something different, or did you want a different centering?

I do not see the rule I gave you for the color. If you removed it, put it back and let me know what color you put in so I can see why it is not working

 

 

[Patti]

@scrambler The only thing that the code did was to add space between the menu bar & the name of the quilt on the individual quilt’s page. I still need the correct CSS for adding space between the bar & the products.

Same issues as before with regards to the price colors. I have them coded in at #291C3A yet they are showing up at #0A786B. Went through all of the CSS that I have added & can’t find the error that will change the font color for the price.

The “Add to Cart” button is finally showing aligned to the center underneath the quilt. Thanks for that coding!

I would also prefer that if someone clicks on a quilt image (I’ll be adding more as the days go by) that it opens up in a new page. Searched high & low for CSS or HTML to do this. Tried a dozen or more codes & nothing seemed to work.

[Patti]

I would also like to hide the Category & the Tags from the individual product’s pages: https://dashpatterns.com/wp60/product/garden-glory-quilt/ on all pages. Tried a dozen or more different codes but none worked. Any help is appreciated!

[scrambler]

Make sure you clear ALL your caches after making a change!

1- Space at top

The rule

.woocommerce ul.products li.product a img {padding-top:20px !important;}

Is not in your page.

Have you removed it?
If so, as I told you, please leave it in place so I can see why it would not work when it works with me.

If you did leave the rule in your custom CSS, then please paste here the whole content of your Custom CSS rule box so I can see if there is a syntax error somewhere that breaks things.

2- Regarding the color, I had misunderstood and gave you a rule for the Add to cart…

The correct rule is the one @user gave you initially, but add !important

.woocommerce .price > .amount {color:#0A786B !important;}

Same here if it does not work, Leave the rule in when you post back

3- Category and tag there should be an option in woocommerce…,  if not try:

.posted_in, .tagged_as {display:none;}

Same here if it does not work, Leave the rule in when you post back

[Patti]

Sorry @scrambler for deleting the CSS that you gave to me. I added it back & you should be able to see it now. The color for the price should be #0A786B. The color in the “Add to Cart” buttons should be #291C3A.

I reentered the rule for the space under the bar. It only changed the space above the title of the page & did nothing for the space below the bar.

CSS for removing the categories & tags worked great! Thanks! Please tell me how can I edit it so it includes the SKU?

I think that I have covered everything that you asked me to replace. Now I have another issue: Some of my quilt images are square & some are rectangular (you can see two examples on my homepage). Is there a way to customize the space so that both images are fully showing on my homepage? All I can find is that I have to set the thumbnail size but it doesn’t give me any options for what I need. I don’t see any CSS for this problem on the WooCommerce customizations that you sent to me.

 

[Patti]

I forgot that I need help with a couple of other issues: Where do I change the color of the # of products in stock? Or is there some custom CSS that will allow me to change it to some #color that matches those on my site? See link below so you see what I’m talking about.

I also want to remove the title that says “Description.” Don’t need to have it say it twice since it already says that on the tab. See it here: https://dashpatterns.com/wp60/product/garden-glory-quilt/

[scrambler]

I am very confused.

1 – Can you detail WHERE exactly you are putting the rules, and can you copy paste the content of that box here after you do the items below.

I did find your list of custom CSS and you seem to have tried and left several rules with text color that are probably interfering, and one of them has a syntax error

Rule below has two errors, a missing colon and an extra semi colon, and If it was an attempt at setting the color for the price, remove that part so it does not interfere with the other rule

.woocommerce div.product p.price del, .woocommerce div.product span.price del {
font-weight bold; color: #291C3A;
; }

Should be

.woocommerce div.product p.price del, .woocommerce div.product span.price del {
font-weight:bold; color: #291C3A;
 }

 

2 – Currently your prices ARE set to #0A786B

3 – For the TEXT color of the Add to Cart, I can see the rule below but it does not work because you forgot the # on the color code

.button.add_to_cart_button, .single_add_to_cart_button, .button.product_type_variable, .button.product_type_grouped, .button.product_type_simple, .button.product_type_external {
color: 291C3A !important;
}

If you added it, it Should be #291C3A 

.button.add_to_cart_button, .single_add_to_cart_button, .button.product_type_variable, .button.product_type_grouped, .button.product_type_simple, .button.product_type_external {
color: #291C3A !important;
}

4 – The rule I gave you for the space is NOT there, did you remove it? if so can you PLEASE leave it in

5 –  If you wanted the Sku gone too, then REPLACE the rule I gave you by

.product_meta {display:none;}

 

[Patti]

@scrambler – The space code is there & it has been. I added it to the Fonts & Custom box in the Weaver Xtreme options. The CSS for removing the SKU worked perfectly! Thanks! Still need to change the text color for how many are in stock & remove the “Descriptions” text below the “Description” tab on the product pages.

I replaced all of the coding that I had that was wrong with the correct coding you sent to me. Most of it I added to the Customize > Custom CSS space> Global CSS:

.is-mobile .wrapper {padding-left:4px;padding-right:4px;} .is-desktop #infobar{margin-left:25%;width:60%;} .is-desktop #primary-widget-area, .is-desktop #secondary-widget-area {margin-top:-10px;margin-bottom:0px;} .error404 .blog .tags-links, .single .tags-links, .archive .tags-links { display: none; } .category-display-none { display: none; } .widget-title {text-align:center;margin-bottom:5px;} .category-title-label {display:none;} h1.archive-title {text-align:center;color:#00B8CC;} .content-3-col-right, .content-3-col-left {width:40%;} .page-title {text-align:center;padding-bottom:.5em;;max-width:60%;margin-left:auto;margin-right:auto;margin-top:1em;color:#117162;}.unslider li { margin: 0 !important; }
.unslider li { clear: none !important; }ul.wvrx-menu {margin-left:0px;}
.is-desktop .menu-alignright {padding-right:0px;}
#wrapper .search-form .search-submit {color:#0F9284;}
.widget-area-top {padding-left:10px;}
#site-info {width:100%;padding:0;}.privacy-policy-page-link {
display: none;
{
.woocommerce ul.products li.product a img {padding-top:20px !important;}
/* – Price */
.woocommerce-Price-amount {
color: #291C3A;
font-size: 110% !important;
font-weight: bold !important;
}
.woocommerce #respond input#submit:hover,

I think that I covered everything you asked about.

[scrambler]

1 – The CSS you posted appears incomplete as the last line is cut in the middle of a selector with no rules, and the rules we discussed are not in there

.woocommerce #respond input#submit:hover,

Can you copy paste all of it and make sure all is there?

2 – what do you mean by “most of it” I added to the Customize > Custom CSS space> Global CSS

Are you adding some somewhere else and if so where, and past the content here too.

 

[scrambler]

Well, sorry, but this is a mess.

You appear to have entered CSS in different places and some have major syntax errors and duplications of rules.

For example I found the bit of CSS below after the theme CSS, so I am not sure WHERE you entered it?

.privacy-policy-page-link {
display: none;
{
.woocommerce ul.products li.product a img {
padding-top: 20px !important
}

/* – Price */
.woocommerce-Price-amount {
color: #291C3A;
font-size: 110% !important;
font-weight: bold !important;
{
.woocommerce ul.products li.product a img {
padding-top: 20px !important
}

In several places (yellow), you used an OPEN curly bracket instead of a CLOSED ONE which screws up things badly and explain why the space rule among other things does not work or show up…

My suggestion is to remove ALL the custom CSS you entered in various places, and paste it in a file for safe keeping and cleaning up

Once in a file, go through it and make sure the open close curly bracket are all there and in the right location. Also if you see duplicate rules trying to do the same things as what you asked here, only keep the last ones we discussed.

Then you will Place it all in the Customize > Custom CSS > Global CSS, so we can review it all in one place and eliminate all the duplicates and correct the errors.

[Patti]

In my defense I am struggling with an advanced case of multiple sclerosis. I take full credit for the mistakes that I have made. Thank you for walking me through the process of setting up my site! Your patience is truly appreciated!

Most of the CSS that I didn’t put in the Customize > Custom CSS > Global Custom CSS space can be found at the Weaver Xtreme Options > Fonts & Custom > Custom CSS Rules.

I am not comfortable deleting all of the CSS yet. Here is the CSS that is found in the Customize > Custom CSS > Global Custom CSS space (after I closed the }):

.is-mobile .wrapper
}
padding-left:4px;padding-right:4px;}
.is-desktop #infobar{margin-left:25%;width:60%;} .is-desktop #primary-widget-area, .is-desktop #secondary-widget-area
}
.margin-top:-10px;margin-bottom:0px;
}
.error404 { display: none;
}
.category-display-none { display: none;
}
.widget-title {text-align:center;margin-bottom:5px;
}
.category-title-label {display:none;
}
h1.archive-title {text-align:center;color:#291C3A;
}
.content-3-col-right, .content-3-col-left {width:40%;
}
.page-title {text-align:center;padding-bottom:.5em;;max-width:60%;margin-left:auto;margin-right:auto;margin-top:1em;color:#291C3A;
}
.unslider li { margin: 0 !important;
}
.unslider li { clear: none !important;
}
ul.wvrx-menu {margin-left:0px;
}
.is-desktop .menu-align right {padding-right:0px;
}
#wrapper .search-form .search-submit {color:#FDB815;
}
.widget-area-top {padding-left:10px;
}
#site-info {width:100%;padding:0;}.privacy-policy-page-link {
display: none;
}
.related.products {
display: none;
}
/* – Price */
.woocommerce-Price-amount {
color: #291C3A;
font-size: 110% !important;
font-weight: bold !important;
}
.woocommerce ul.products li.product a img {padding-top:20px !important;}

And here is the CSS that is found in the Weaver Xtreme Options > Fonts & Custom > Custom CSS Rules after I deleted the duplicate CSS (from the Customizer):

.widget-title {text-align:center;margin-bottom:5px;} .category-title-label {display:none;} h1.archive-title {text-align:center;color:#291C3A;} .content-3-col-right, .content-3-col-left {width:40%;} .page-title {text-align:center;padding-bottom:.5em;;max-width:60%;margin-left:auto;margin-right:auto;margin-top:1em;color:#291C3A;}.unslider li { margin: 0 !important; }

 

[Author]

Posts