- This topic has 9 replies, 2 voices, and was last updated 5 years, 3 months ago by
.
Hello,
The custom woocommerce page has a titlebar and the filter doesn’t have any margin below 900px. Titlebars are turned off from theme settings and the shop page is synchronized with them.
I used the following code:
/* 900px and below screen sizes */
@media screen and (max-width:900px){
/* Titlebar */
.sh-titlebar .sh-table{
display: none !important;
}}
/* screen sizes larger than 700px and smaller than 900px */
@media all and (max-width:900px){/* Division */
#content .woocommerce-ordering > div{
margin-top: 60px;
}}
When I paste it in the child theme, it doesn’t work. It works fine when I use the built in CSS editor that WordPress has. But when I do that the category filter glitches because it first loads the old css where there is no margin and then in loads the changes that I have made. How can I overwrite the woocommerce css so my page loads the new one first?
I tried to paste the code in the child theme because I thought it would help with the bug.
I tried deleting my browser cache, the child theme does not work on my mobile and on 2 browsers on my laptop.
Hi @Inochishirazu,
I hope you are well today and thank you for your question.
Dues to technical jargon, I didn’t understand your question properly.
Instead of asking “How can I overwrite the woocommerce css so my page loads the new one first”, could you please tell me what is the issue that you are facing or what you are trying to achieve so that I can help you?
Best regards,
Shufflehound teamOn the video that I have shared you can see that the woocommerce shop first loads the original css stylesheet and then my additional css.
The box that filters posts first shows at the top left corner behind the header and then to the new place.
I can’t find the woocommerce stylesheet to change this from there instead of in WordPress’ integrated css editor.
It seems happening because the custom CSS code that you are using is loading a bit later causing this behavior.
You can use any WordPress cache plugin to load it faster or try adding it in the style.css file of the child theme by using the attached child theme.
Hello, cache plugins don’t help with the problem.
As I told you in the first explanation, your child theme is not working for me.
I have deleted cache on every device that I tested with (two laptops, 4 browsers and a phone)
The code is correct because it works when I place it in WordPress’ default editor.
I logged into your shared site but I didn’t see the child theme being used on your site.
Please use the child theme solution so that I can help you.
Thank you for the support,
I am not sure what you mean by use the child theme. I installed the child theme immediately after installing the main one. You can see that it’s there in the screenshot.
The code that I am using you can find in WordPress’ main css editor (Additional css). If you remove it from there and place it in the child theme it does not work at all : )
You can see/test the shop page on a mobile device before and after you transfer the code.
The child theme on your site is broken as shown in the attached screenshot.
Please remove that broken child theme from your site and install & activate the above shared child theme on your site.
If you don’t know how to install and activate the child theme then please refer the information provided in the below pages.
https://www.wpbeginner.com/beginners-guide/how-to-install-a-wordpress-theme/
Now half of the css is not working and it still has the glitch.
Thank you for your time and support but I’ll text in the WooCommerce forum to find where their css is so I can change it directly 🙂
You are most welcome here 🙂
