Hello after much deliberation I cannot seem to have the woocommerce product image to show. It is isn't a dead link and I have supplied the same image to all the product variations as recommended here: WooCommerce Variation Images not displaying
Any recommendations on how to fix this would be awesome!
The page is posted there: http://beta.ctda.com/product/measuring-class/
The image is there when you inspect using browser console.
It was hidden due to opacity set to 0.
Change it to 1, it will work
.product.has-default-attributes.has-children>.images {
opacity: 1;
}
There is CSS issue with image, Put the following code to your css file and image is shows on the product details page.
Right now opacity of image is 0, You can change that by following...
.product.has-default-attributes.has-children > .images {
opacity: unset;
}
Related
I have a WooCommerce site built with the Avada Theme. I've attempted to make the image gallery 'sticky' on product pages. The idea is to make the Image Gallery scroll down alongside the short product description / add-to-cart section on the right column, which tends to be longer.
I saw a line of code on this article here, which helped work out the code for the Avada theme (I'm using Avada's image gallery instead of WooCommerce's):
.avada-product-gallery {
position: sticky!important;
top: 0!important;
}
Correct me if I'm wrong, but from what I get from the linked article, this line of code hereabove would work, but needs overflow:visible on the body or bigger container where the gallery is.
I am learning coding at the moment so I'm kind of fishy on the subject - with all respect to fish. I have tried to trace back the container where I have to add the overflow: visible!important, but it's resisting me, so I am kind of lost with the code at something like:
XXXXXXXXXX .XXXXX {
overflow: visible!important;
}
I leave you an example of a product page I'd like to change to see if someone can help me identify the container which I have to refer on code to change the overflow display:
https://architectoutlet.com/shop/gifts/gifts-for-science-lovers/ti-asia-blue/
I come up with .flex-viewpoint .product { ?? .Fusion-row .product {?? avada-single-product-gallery-wrapper avada-product-images-global avada-product-images-thumbnails-left ??
I am all ears and open to learning, so any tip on the matter is welcome!
Thank you
best regards to all :)
You can add your own custom javascript
.avada-product-gallery is your product page gallery class
jQuery(window).bind("load", function() {
var width = jQuery(window).width();
if (width > 767) {
jQuery(".avada-product-gallery").stick_in_parent({offset_top:60});
}
});
Tested & It's working from my end.
Thanks in advance
total beginner here, so apologies if this is not the place to post.
my site has a white background throughout but woocomerce has an annoying gray background around the edges of its pages (cart, checkout, product pages), and i was able to figure out that by adding the following code to Customize CSS section of my site fixed the problem
.woocommerce-cart, .single-product { background: white; }
BUT I cannot find the value to use for "checkout page" to change its background to white. i tried .woocomerce-checkout and woocomerce_checkout and .checkout. no luck :( any advice?
The body class of the woo-commerce checkout page is correct what you have mentioned (.woocommerce-checkout).
Please try adding !important flag to CSS property.
.woocommerce-checkout { background: white !important; }
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 am using this theme for a website:
click here to view the wordpress theme demo
On the homepage, it displays blog posts WITHOUT the blog post title/date. It only displays this information when you hover over it.
How can I remove this state? I would like the blog post title and date to always be visible.
You'll need to edit the style.css file. If you look in Chrome's developer tools on the demo you linked to, and highlight one of the squares which has the hover effect, you can see that on line 649 of the style.css file there's a rule for .post-overlay:hover which changes the opacity to 1.
All you need to do is set .post-overlay {opacity: 1; } in style.css (note the lack of ":hover"), and remove the :hover rule. This will mean that the opacity is always 1 (100% opaque), not just when the cursor is hovering over the element.
There is a css rule in style.css (line #654) that is controlling that fade in effect:
has-post-thumbnail .post-overlay{
background: rgba(0,0,0,.75);
opacity: 0; }
The opacity changes to 1 when hovered, and the background gives the darkened effect. Change these css rules and you'll get the effect you are looking for.
set like so:
has-post-thumbnail .post-overlay{
opacity:1; }
This will get rid of the darker background and make the text visible. You'll still have the corresponding text animations in the following rules to set as you like. (the rule that governs these is { .post .post-overlay, .has-post-thumbnail .archive-post-header } and is on on line 193)
Use firebug in firefox to edit these parameters live before you edit.
I have a strange problem with my facebook like button.
Normally, when you click 'like' on a site, you get a popup for a comment. This popup has 100% opacity on mouseover, but reduced opacity on mouseout.
However, on my site, this is reversed. I get 100% opacity on mouseout, and reduced opacity on mouseover. Obviously, this makes it difficult to use.
Here's my site: http://notts-squash.co.uk/results.html?table=teams&idd=440&season=10&social=true. (To test on other pages, add &social=true to the URL.)
Many thanks in advance! This has been confusing me for weeks.
The CSS from widget72.css is causing the transaprency:
.at300b:hover {
opacity: 0.8;
}
You could change your CSS file to :
.at300b:hover {
opacity: 1;
}
As long as your CSS file comes after widget72.css (which I assume your are hot-linking to) then this should fix the problem. Otherwise you can add !important to the code in your CSS file.
Edit
If you wanted the children to have the opacity: 0.8 (in the pop-up) when you are not hovering then you could try the following:
.at300b > * {
opacity: 0.8;
}
.at300b:hover, .at300b:hover > * {
opacity: 1;
}
This is a bit of a hack but would work incase you never find why you are getting this behavour.
I can't figure it out as of yet, however, first thing I'd recommend is to change from fbml to html5 style tags for the like plugin. If that doesn't work, try taking the like plugin out of the complexity of the results.html page and place into a page with minimal HTML elements. If that works, then you will need to start with a bare bones version of the results.html page and start adding in element/block of HTML at a time until the plugin breaks. This will tell you what HTML is causing problems with the like plugin.