I am using Woocommerce - Boutique theme.
This theme has a price banner on the category pages that I have wrestling with. In the standard theme, it is on the top of the product image, and semi blocks the image, so I moved it to the bottom of the product image, and with in-between screen sizes, it now blocks the category product name text below the image. In mobile view, the price banner moves way to the right.
I would love it if I could get the price banner to behave,and stay with the product image and not block anything or move, but failing that, I would like to just have the price as plain text below the product and product title - so that it looks the same on any size screen - if anyone can perhaps take a look and see how I can accomplish this - I am at a loss.
Months ago in the Boutique forum I was given the below solution - but it did not do anything to change the banner for me - it didnt change anything..
span.price {
color: black;
background: none;
position: relative;
box-shadow: none;
}
span.price:after {
display: none;
}
The site I need help with is here
I figured it out
/* REMOVE PRICE BANNER MEDIA ALL*/
ul.products li.product .price {
position: relative;
top: .01em;
padding: .1253em .3857em;
background: none;
color: black;
box-shadow: none;
font-weight: 400;
}
ul.products li.product .price:after {
display: none;
}
Related
I'm trying to center some content. I've inspected the elements and can't figure out how to add the correct changes to custom CSS. I'm using a widget shortcode so can't edit this directly in Elementor text editor.
I'm in WordPress and use Elementor as my page builder.I tried a generic "div" line, however that centered several things on the home page. I'm looking to center Star Rating and the Add to Cart button. Thanks for any advice. New to working with code and feel like I'm barely missing it, but missing it nonetheless.
Featured Products Widget
This is what I used to center the Product Title and Price.
.woocommerce-loop-product__title, h {text-align: center;}
span.price, h
{text-align: center;}
One of the elements when hovered over shows -
div.star-rating::before
I'm not an expert on CSS, but I think you can use this for the Stars.
.star-rating {
margin: 0 auto 0 !important;
}
and you can use this for the Add to Cart button
.woocommerce ul.products li.product .button, .woocommerce-page ul.products li.product .button {
margin-top: .5em;
margin-bottom: .5em;
white-space: normal;
line-height: 1.3;
margin-left: 4em;
}
This is how it looks for me.
if this help you, don't forget to mark the answer.
I use WordPress + WooCommerce to develop a website. I implement Products widget in the Elementor. I want to have red background #EC1D38 for the product title as shown as the image. The default settings do not have the background color setting. Any help will be appreciated. Thanks.
Sample
Current situation
I've added one class in your div is called "fruits".
Please add the below CSS to your CSS file.
.fruits h2.woocommerce-loop-product__title {
background: #ec1d38;
color: white !important;
padding: 15px;
margin: 0;
}
.fruits li.product.type-product {
padding: 0 !important;
}
.fruits a.button.product_type_simple {
display: none;
}
There is great documentation on how to change or remove the handheld menu links in WooCommerce available. However, I have noticed that many mobile designs (mweb and apps) are trending towards showing text as well as icons for handheld menus. I want to display the text for the link UNDERNEATH the icon, as well as the icon itself.
It looks like WooCommerce has intentionally hidden the text for the handheld link using CSS:
.storefront-handheld-footer-bar ul li>a {
height: 4.235801032em;
display: block;
position: relative;
text-indent: -9999px;
z-index: 999;
border-right: 1px solid rgba(255, 255, 255, .2)
}
My suspicion is that I should just change the text-indent and the text will show back up. For example, in the instructions provided by WooCommerce to add a new home link to the handheld menu, my thought was that changing text-indent in the CSS would allow me to display both the icon and 'Home'.
function jk_home_link() {
echo '' . __( 'Home' ) . '';
}
But, I can't quite figure out how to "undo" the text-indent so that the text for the link shows as well. Any thoughts?
The text is hidden due to "text-indent: -9999px;" so you can change it as follows.
Here I am additionally added "line-height:" to arrange position of the text.
.storefront-handheld-footer-bar ul li > a {
text-indent: 0px;
line-height: 95px;
}
If you need to adjust position of the icons, you can add following css and make changes on the value.
.storefront-handheld-footer-bar ul li>a::before {
line-height: 2;
}
I would like to add a hover effect on the Home Page like here:
http://demo.woothemes.com/?name=galleria&_ga=1.242371650.1503770507.1481544136
I found a way to add a hover effect in product
/* Make product in categories glow on hover */
.woocommerce-page ul.products li.product:hover {
box-shadow: 0 0 20px #1e73be;
}
But I can't find a way to make this for product categories in the home section.
I use the Storefront Child Theme Master to Edit the Storefront Themes:
https://github.com/stuartduff/storefront-child-theme
Any kind of help is appreciated,
Regards,
UPDATED ANSWER:
You will first need to alter the position and visibility of the h3 titles.
ul.products li.product.product-category h3 {
top: 0;
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
padding-top: 25%;
background: rgba(255,255,255,.6);
}
And then make it visible on hover.
ul.products li.product.product-category:hover h3 {
opacity: 1;
}
That's as close as I can get to the demo without going into media queries :/
I have a number of issues with my woocommerce pages in my wordpress site that I am hoping someone could help me with. They have been driving me crazy trying to fix.
My theme - Trias - http://www.mojo-themes.com/item/trias-multi-style-corporate-responsive-theme/ does not support woocommerce and this has creatd issues.
First one is the woocommerce pages - category and product fill the entire screen i.e. right to the edge. Any idea how I would change this to be in line with my theme?
At the bottom of these woocommerce category and product pages - the theme ends and you can see grey area beneath the theme area - any ideas on how to prevent this.
Final query and this one is the most annoying - the theme has a floating icon on buttons i.e. a floating small arrow on the left of the arrow before the words start. Problem is on the woocommerce pages - the floating arrow floats above the words on the button. It is super annoying.
My themes button is as:
button,
a.button {
display: inline-block;
position: relative;
margin-top: 30px;
border: 0 none;
/* background: #00a3da url("images/button-link-arrow.png") no-repeat 0 50%;*/
padding: 7px 12px 7px 35px;
text-transform: uppercase;
color: #fff;
font-family: "Oswald";
font-size: 16px;
line-height: 20px;
cursor: pointer;
Please see image of the button with floating arrow: image of button with incorrect floating arrow
Thank you very much in advance for any suggestions at all
— U P D A T E D —
Add this CSS rules to the style.php file of your active child theme or theme
For your icon buttons :
.button.product_type_variable.add_to_cart_button,
.single_add_to_cart_button.button,
button.single_add_to_cart_button,
.button.wc-forward {
padding-left: 34px !important;
}
.button.product_type_variable.add_to_cart_button:before,
.single_add_to_cart_button.button:before,
button.single_add_to_cart_button:before,
.button.wc-forward:before {
top: 6px !important;
}
For your content (only woocommerce pages):
.woocommerce .content-wrap {
width: 934px;
margin: 0 auto;
padding: 20px 30px 20px 36px;
}
You will have to add custom media queries and adapt the values of this rules depending on target screen resolutions.
I think that you haven't set correctly your pages (regarding your theme), that's why you have this kind of "content" problems on woocommerce pages:
The best way to solve this kind of issue is to contact author's theme support threads, opening a ticket.