I'm new to coding, very new and have some code that I believe needs to be added to "custom CSS" in my e-commerce site. This is to remove the issue of bullet points appearing on the top left of products (screenshot attached), when using the product category field with woocommerce.
I've done this through my theme but it doesn't work. Any ideas?
thank you! Such a huge learning curve and I appreciate the help.
Snapshot of dots on product pages
Please add in /new/bouquets/inspector-stylesheet.css
.woocommerce ul li { list-style:none !important;}
or
.woocommerce .item { list-style:none !important;}
Related
I am working on the cart page for my site and I have a question. I want to try and hide the subtotal after each product price BUT still keep the total cart subtotal. I added a screenshot as a reference below. Any help would be fantastic!
annotated screenshot
This could be accomplished by CSS.
eg.
.woocommerce table.cart td:nth-of-type(6), .woocommerce table.cart th:nth-of-type(6) {
display: none;
}
As explained here: https://www.businessbloomer.com/woocommerce-hide-column-cart-table/
I need to remove the hover animation on the product listing, When I place the mouse over a product listing it display some buttons to add to cart or add to the wishlist, and a transparent background is appearing as well. I want to hide these elements and display the product as it is.
An example can be found here, http://test.techvoip.it/staging/categoria-prodotto/monopattini/
I'm using Woocommerce and I'll be glad if someone can find me some sort of a solution.
Just insert this CSS code into the custom CSS setting.
.vgwc-item .ma-box-content:hover .vgwc-image-block a:before, .vgwc-item .ma-box-content:hover .vgwc-image-block a:after {
height: 0!important;
}
.vgwc-item .ma-box-content:hover .vgwc-image-block .vgwc-button-group {
display: none!important;
}
Try it and let me know if it does the trick for you.
I work on small home project, and removed images from category/subcategory to be shown into shop page. I corrected blocks to be small, into shop page, but when go to category that have subcategory inside blocks are much larger then others.. So i want all blocks to be the same size. For example into shop page:
and into subcategory page:
i tryed to fix that blocs via this CSS:
.fusion-blog-layout-grid .post .fusion-post-wrapper, .fusion-blog-layout-timeline .post, .fusion-portfolio.fusion-portfolio-boxed .fusion-portfolio-content-wrapper, .products li.product {
height:120px;
}
but makes all blocks smaller including products. So any tip how to fix this?
Change your style css with follows -
.fusion-blog-layout-grid .post .fusion-post-wrapper, .fusion-blog-layout-timeline .post, .fusion-portfolio.fusion-portfolio-boxed .fusion-portfolio-content-wrapper, .products li.product-category.product {
height:120px;
}
I have a bookshop site in Wordpress, as per the image below. The alignment of the Add Cart button is not the same for the two products. Note that this is the shop page.
How can I align the Add to Cart Button to be the same for every product regardless of the product image size and product title length?
I'm using:
WordPress 4.3.1
WooCommerce 2.4.11
THEME - > VantageVersion: 1.4.4 By SiteOrigin
First, your question is very, very vague. It's hard to troubleshoot with far more information. However, I will try and get the conversation started.
What list is this? Home page? Category page?
Essentially, you've got to "normalize" the space that the title takes up. Notice that in the second product, the title of the product is two lines, where the first product is only a single line. Will any of your products have three lines? Four lines? Five? That is essentially the issue.
Further, depending on your theme, this could be completely different markup / code.
With ALL of that being said, the issue can be resolve simply with the right css. For a "typical" WooCommerce site, this would take care of it:
In your stylesheet, declare this style on this selector:
ul.products li.product h3 {
min-height: 50px; /* NOTE: This amount will have to change depending on how many lines you want to support. Allow about 20-25px per line */
}
I Added this code under the theme's style.css
.archive #main ul li a h3 {
min-height: 70px;
}
Solved my problem.
The free woocommerce theme artificer has an ugly home icon button that I would like to remove. Here is the page for the theme so you can see what the button looks like:
http://www.woothemes.com/products/artificer/
I tried searching around and found one person who said to make a new menu bar, which I did, although it still had the icon on it.
I think it looks OK actually :-)
But anyway, just add this to your custom CSS. You might be able to do this in the theme settings somewhere. If not, just set up a child theme and put this at the bottom of the CSS file:
#navigation ul.nav li.home a span {
background-image:none;
text-indent:0;
}
#navigation ul.nav li.home a {
display:none;
}