i've been asked by a friend to help out with a website he's starting(e-shop). I am a total beginner so i just google everything :(. He does not have any access to the code(hosted by a provider), he can only edit the user.css file. The problem is, he wanted to remove border around the product pictures so i managed it by adding:
.product-grid .image img {
border: 0px;
}
This worked fine for the product grid on the homepage("home"), however does not apply for the product grids within categories(picture "category"). It shows me that a different css is applied than mine user.css. Any idea. Just from the basics i've thought the user.css will overwrite any previous css that would refer to the same. Any idea how i can define the same for other pages as well?
category
Home
to overwrite any previous css use "Important"
.product-grid .image img {
border: 0px !important;
}
Related
I am trying to change my products image on hover in woocommerce in wordpress !!!
I tried some plugins I saw like Woocommerce Product Image Flipper & Magni Image Flip for Wocommerce but they are not working for some reason and I tried the solutions you are suggested here in some similar questions .
So do you know another plugin free or not I dont care or do you know maybe an other solution with CSS maybe I dont know
I am using
Wordpress Version : 5.3.2
Wordpress Theme : Flatsome
Woocommerce Version : 3.9.2
Thank You for helping and sorry for my English :)
ok #st3ph3n92 it is working for me !!!
I just write custom css for the 10-20 products I have online every day so for now I am fine !!!
Now in the future I hope there is plugin to do this job ^^
Thank you again for your help #st3ph3n92
#N. Mar, Yes, the custom URL I used was only as an example. With background-image: url("img2"), that would select img2 if it is the same folder as your CSS file. However, if your images are kept in a separate folder, for example "images", the CSS might be background-image: url("images/img2").
There is a StackOverflow post on folder paths here that might be quite useful: What does "./" (dot slash) refer to in terms of an HTML file path location?
Because you're using WooCommerce, I imagine how you're images are stored is a little different. This article might shed some light on it: https://enviragallery.com/where-does-wordpress-store-uploaded-images/
If you want this to be automatic on Wordpress, you will need to use PHP. The issue is that you cannot use PHP in CSS. Instead, you would need to add the styles inline or in the head of the theme's html (as opposed to a separate stylesheet) and then use PHP to reference the image. This is a good bit trickier. There's another Stackoverflow post on that here: CSS background images in WordPress
if you have access to the CSS, you could try setting the image as the background of the div it is in. You could then use the :hover selector to set a new background image.
You can see this on the CodePen here: https://codepen.io/St3ph3n92/pen/BaopGQx
Or run this snippet:
.image-holder {
height: 300px;
width: 300px;
border: 3px solid black;
margin: 0 auto;
background-image: url("https://images.unsplash.com/photo-1491553895911-0055eca6402d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80");
background-size: contain;
}
.image-holder:hover {
background-image: url("https://images.unsplash.com/photo-1514218953589-2d7d37efd2dc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60")
}
<div class="image-holder"><div>
I hope this helps.
Thank you St3ph3n92 for your answer
So can I change this code with something like this ???
.product-image {
height: 770px;
width: 1155px;
border: none;
margin: 0 auto;
background-image: url("img1");
background-size: contain;
}
.product-image:hover {
background-image: url("img2")
}
<div class="product-image"><div>
I mean that I want something more automatic cause I have 700+ products so I cant insert custom URLS for each one !!! I need a code so on hover my main Products image change with the second image from Product Gallery
Thanks again for your answer !!!
I had the same issue on some of my websites with the same configuration as yours.
Until a few days ago, I had that flipping effect on my products. It was by default, I didn't install any plugin for this feature. Today I noticed that it's not working anymore.
I managed to solve this issue by disabling Autoptimize plugin. I don't know if you use the same plugin, but maybe my answer will help you.
Having the oddest dilemma. I've modified the rest of my site pretty extensively with custom css coding for my theme. The rest of my site is fine, but things get thrown off in my checkout page since the upgrade to the latest version of wordpress.
In any case, you can see what's going on here:
https://sportsautotech.com/checkout/
As you can see, both the 'billing and shipping' box fields and 'your order' box fields are below each other in 1 column.
I'd like them side by side as indicated in the attached picture.
I currently have no custom css inserted for this checkout page. I've tried adding custom css code as suggested by other posters through google searches, but none seem to work and actually make things worse.
If I can get that solved, does anyone have any suggestion on how to fix the other 2 smaller issues with the State field indentation and Phone number field dropping down a line?
Thanks so much for any potential help! Please refer below.
Images:
currently
desired
to achive your target result past the below css in your style.css or in the WordPress customiser :
.row-fluid .span6 {
width: 46.93617% !important;
}
#billing_postcode_field{
float: left;
width: 45%;
}
#billing_phone_field {
width: 50%;
float: right;
}
#billing_state_field, {
float: unset !important;
}
.payment_method_stripe{
margin-top: 3rem
}
OutPut:
For changing colors in some part of a WordPress theme, I've changed the background or color property of those elements (found using inspect in chrome) in style.css. But it is not changing in the theme.
I also tried making child theme of the theme. But no result.
For example, the style.css contains -
#header .nav_bg {
background: #7bae39;
margin-bottom: -30px;
padding: 5px;
}
I've changed it to -
#header .nav_bg {
background: #109DE4;
margin-bottom: -30px;
padding: 5px;
}
N.B: I've tried with SiteOrigin Custom CSS plugins, and it works with that. But I want to do it by changing CSS.
Thanks in Advance.
Use higher selector, element that contains that div or use
!Important before ;
Just add code to custome css in WordPress
If the same selector works with other plugins you might wanna try a few test to try to see what's going on.
Go the page and look for the style you just added on the
inspector. You can see by selecting the element if it is getting
applied and overridden by other css rule. In that case you can
update the rule to be more specific.
If the css is not showing up at all, you can try:
clearing your browser cache
check the page on incognito / a different browser
Hope it helps,
Using the Flatsome theme I have a few questions and would like to try and get them solved myself, is this the manner in which I should direct those questions?
I'm running WooCommerce I'd simply like to know how to make the breadcrumbs bar a little smaller where it displays the name.. on the single product page it looks great but I see no settings to edit it on the display list, i can show you a screenshot of the problem here (ALSO I WANT TO CHANGE THE WHITE BACKGROUD WHERE IT SAYS "HEADSHOP" TO SOMETHING MORE MATCHING) -- THERE ARE NO OPTIONS FOR CHANGING ANY OF THIS?
I'd really like to be able to edit this area and I'd like to gain more access to it, this theme appearance editor area wont let me do it, I've tried and tried to no avail!
With that being said, this is just the display of all the main products.. What throws me off is that in the Single Product page it formats exactly the way I want it to on all pages, see example here..
Im not an expert but I suggest you to put the URL of your website as minimum, because is going to be difficult to help you without what you have tried or the code of your website.
Following with the question, you can reduce the height of the container using some CSS. By default both margins (in this case the padding) are in 20px, so i just reduce them to 0.
.featured-title .page-title-inner {
padding-bottom: 0px;
}
.page-title-inner {
position: relative;
padding-top: 0px;
min-height: 60px;
}
This is how it looks with the modifications in the margins.
https://i.stack.imgur.com/r7KX7.jpg
https://i.stack.imgur.com/bMmNd.jpg
But still, I don't understand what it's keeping the text so high in the container.
To change the background color of that button, you can modifiy the CSS Property.
.nav-tabs > li.active > a {
background-color: red;
}
This is how it looks.
So you just need to put that CSS in your theme.
If my answer helped you, please consider marking it as an Answer.
I've been stuck on this for 3 days now.
I have two pages that basically share some code for a search feature on my website, here's my code
The CSS
#btnSearch {
display: block;
color: #ffffff;
width: 100px;
height: 27px;
border: 0;
padding: 0;
background: transparent url("Images/btnSearch2.png");
}
When I'd gotten the one page working, I copied that code to the page where it doesn't work, but it hasn't made any difference, here's the HTML (don't worry about the inline css, that's just for convenience while I'm working on it...)
EDIT1:
All other classes work correctly as they (along with the css above) come from a stylesheet at <webroot>/App_Themes/Default... The images go in a subdirectory of this location.
I don't see why this code works on 1 page and not the other when all the other CSS classes work on both pages...
Have you tried the absolute image path and see if it works that way?
Maybe it´s a Browser problem: Try to open the file that doesn´t work in another browser.
Maybe you have a tag named the same way #btnSearch in the pages where the styles don´t apply.
Is the path to the background image correct for the page where the code doesn't work? Or even the path to the CSS file?