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

[Patti]

There still needs to be some space between the bar under the page title & the products. If I can get that fixed (along with the site’s CSS mess) then I’ll leave you alone

[Patti]

I just realized that after I deleted nearly all of the CSS from the Weaver Xtreme Options > Fonts & Custom > Custom CSS Rules that my copyright is no longer centered. In the Weaver Xtreme Options > Footer > Footer Copyright space here is what I have:

<font face=”Roboto” size=”2″>&copy;2006-Present ~ All Rights Reserved ~
DashPatterns.com</br>All original photographs and/or images on
DashPatterns.com are copyrighted by
DashPatterns.com.</font>

I am sure that there is an easier way to write this HTML but this is what worked for me when I set it up. Please tell me how I can get it centered again?

[scrambler]

You dont need to delete it, just move it all in one place.

Then copy paste it in a text file (like notepad on windows) and clean it up so you can verify the syntax. Separate each rule by a line break so you clearly see the beginning and the end of the rule and you can verify it has the proper structure, which is one or several selectors separated by commas, then OPEN curly bracket, then the CSS properties separated by a semi colon, then a CLOSED curly bracket.

selector1, selector2 {property1:value;property2:value;}

 

Your CSS from  Customize > Custom CSS > Global Custom CSS has a series of new major errors at the beginning where you have a CLOSED curly bracket instead of an OPEN one.

See your file with yellow highlights

.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;}

—————————–

This set should look like below, with additional correction in blue for !important missing.

.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 !important;
font-size: 110% !important;
font-weight: bold !important;
}
.woocommerce ul.products li.product a img {padding-top:20px !important;}

 

Once you replace yours in there by the above, you could copy the CSS from the other location, and paste it at the end, then delete it from the other location, so everything is in the same place.

Here is the other CSS cleaned up

.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; }

 

Once you have done all that, copy it all and paste it here again so we can review. No point going further until the CSS is good.

 

For the centering of the footer you need to add the rule below

#site-info {float:none;padding-left:0;}

[Patti]

I did as you suggested: Replaced my CSS at Customize > Custom CSS > Global Custom CSS with the one that you cleaned up. Then I added the CSS from the other location & deleted it from there. Now all of the CSS should be in a single location.

I think that there was a communication error. I do not want the gray bars above the quilt images. I want space underneath the bar that is below the page title.

I am also wanting to remove the title “Description” from the individual pattern pages. It’s redundant to have it in the tab & again below the tab. I do not know if the new CSS caused the “Related” items to disappear but yesterday there were related quilt images there & not there aren’t any (just text links to them). I would prefer just to have the quilt images & could care less about the text that is there underneath the “Related” title.

I think once these things above are figured out I will be happy enough. Thanks for everything!

[scrambler]

1 – To avoid the grey in the space change the padding to margin.

instead of

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

use

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

 

2 – To remove the descripton above the text add the rule below

#tab-description > h2 {display: none;}

3 – If there was images in the related section at the bottom, I would see it in the HTML even if there was CSS to hide their display.CSS cannot remove the HTML.

I do not see any images in the html of that section, so something else must be removing the images.

 

[Patti]

I changed the CSS for the gray bar above the patterns to margin-top:0px & that finally removed it. The CSS to remove the second “Description” title deleted that one, too.

I will have to figure out the issue with the related products myself. I think that it is a WooCommerce plugin that I need to configure to make the images show up.

Now I am back to the same thing that I started this whole thread about: I need more space between the bar that is under the page name (in the case of my homepage it is under the “Shop” title) & the quilt images.

[scrambler]

Please pay attention, I told you to change the padding to margin, NOT to set it to zero.

The value is what will create the space without grey.

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

[Patti]

Done & it looks great! Also deleted this: .related.products {display: none;} & now the “Related Products” are showing up again. What I asked you to help me get rid of is the first set of “Related Products”:

Is it possible to have each of the quilt images & text open in new tabs?

[scrambler]

That explain why there was no image in the section I was looking in.

The related section above the related product is the section for the related post. You should first check if there is a WooCommerce option to not display them as that would be more efficient.

If not the rule below should hide it

#jp-relatedposts {display: none !important;}

[Patti]

If there was a WooCommerce option I couldn’t find it. But your CSS worked perfectly! Thanks! One last thing: Having the individual products open up in new tabs. Is it possible?

[Patti]

Oops my bad. There is one more thing that I want to change that hasn’t been addressed yet. I would like the font color of the inventory, on the individual quilt pattern pages (ex: https://dashpatterns.com/wp60/product/christmas-cheer-quilt/), to be #FDB815 color. Since I have no idea where the current #color is located I don’t know where to change it at?

[scrambler]

“Having the individual products open up in new tabs. Is it possible?”

Not possible with CSS it has to be added to the link HTML so look for an answer / option with WooCommerce

For the stock color, the below should do it

.woocommerce div.product .stock {color:#FDB815 !important;}

 

[Patti]

Your CSS for changing the stock color worked great! Thanks @scrambler for walking me through everything! I’ll keep searching for a way to have my products open in a new tab. Not having much luck so far.

[User]

@Patti

“How to open woocommerce product links in new tab ?”

See: https://www.developingsense.com/blog/open-woocommerce-product-links-new-tab/

and: https://barn2.com/kb/opening-product-pages-new-tab-product-table/

and also: https://barn2.com/kb/opening-product-pages-new-tab-product-table/

I do hope they help.

Regards!

[scrambler]

Thanks @User.

@weaver, could the code described in the link below to make WooCommerce product open in a new tab go in the PLUS Advanced Options . Head section> Actions and filter Box?

How to open woocommerce product links in new tab ? – Developingsense

 

[Weaver]

That snippet should work, but it may be a bit out of date, and I would recommend this updated version instead.

Add this using Plus Advanced Options:

remove_action( 'woocommerce_before_shop_loop_item','woocommerce_template_loop_product_link_open', 10 );

add_action ( 'woocommerce_before_shop_loop_item', 'wvrx_woo_open_new_tab', 10 );
function wvrx_woo_open_new_tab() {
     global $product;
     $link = apply_filters( 'woocommerce_loop_product_link', get_the_permalink(), $product );
     echo '<a target="_blank" href="' . esc_url( $link ) . 
       '" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">'; 
}

NOTES: This does seem to work, but only when opening products from a product list page. Doesn’t work from the cart list.

I can’t see a simple way to add a new target for items in  the cart list.

 

[Author]

Posts