I'm running woocommerce under the wootique wordpress theme. Here's a link to my site.
Since Paypal is the only payment processor, I wanted the text under the paypal button to be more 'prominent'. Bigger font size, maybe a different colour.
I tried adding the following code to my CSS, but that didn't change anything, even with the !important tag:
#payment .payment_box p {
font-size:16px;
color: #ee4122;
}
According to Firefox that is the right element and even editing the ul.payment_methods .payment_box p directly in my theme's style.css doesn't change anything.
I seem to be stuck. I'd really appreciate it if anyone could take a quick look (you may have to add the item to your cart for the checkout page to show up properly!)
Thank you in advance!
ul.payment_methods .payment_box p {
font-size:16px;
color: #ee4122;
}
This works for me. I do know that caching plugins can cause items to not visually update right away so you have to clear the cache from WP (not necessarily just your browser). I can see your other code in your stylesheet and it is applying (the margin on the ul.payment_methods .payment_box p).
Related
I've searched around for a good while now trying to find a solution for this issue, but haven't seen anyone else experiencing it so far.
I have a WooCommerce store I'm working on developing, and recently noticed that the select field for the billing state is displaying list-style type bullets in front of the options when expanded.
I've messed around in the CSS including removing any background image and making sure there was no list-style attribute applied to the options, but I'm stuck on as to what's happening here.
The issue can be viewed live at this link: http://grahams.staging.wpengine.com/donate/
Does anyone have any ideas on what could be causing this? My guess is it's somewhere in the woocommerce files but I'm unsure as to where I would start looking.
List of Woo Extensions:
One Page Checkout
Name Your Price
WooCommerce Subscriptions
WooCommerce Variation
Swatches and Photos
Other than the above, no customizations have been made. Theme being used is Hybrid.
EDIT: adding an image for those who can't load it/are looking after it's been resolved.
Inspecting your CSS, there is a background image being applied to all ul li elements. See _elements.scss, line 96.
ul li { background: url(images/build/bullet.png) no-repeat 0 6px; }
Adding the following style fixes the issue.
.select2-results__option { background-image: none; }
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.
My problem is that there is a bullet above the checked pay method "Betaling via overschrijving", on my woocommerce checkout page, and I have no idea how to get rid of this extra bullet:
Here is my checkout webpage. You may have to place something into the cart for it to work.
Any help is appreciated
You need to add in your active child theme (or active theme) styles.css file the following rule:
.wpb_text_column ul.payment_methods li {
list-style-type: none !important;
}
It will remove the undesired small bullet from payment methods...
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.
I am new to CSS and have the following problem.
I have created a Joomla 3.3 site using a free template called Prismatic.
My problem arises when i write an article and use bullets at some point.
Bullets show fine on the backend but i get nothing on the frontend.
After reading various posts and forums i got the idea it has to do with the template.css but thats as far as i can get..
My site demo address is "white.dr-tsekouras.gr"
and the axact url where the bullets dont show is:
http://white.dr-tsekouras.gr/index.php/2014-10-13-12-15-44
Sorry the site is in greek
Can you please help ..
You just need to add your own custom styling to your lists.
ul {
list-style: disc;
}
Then, get these styles to be included when your website is loaded. The simplest way would be to create a separate CSS file, and reference it directly in your header.php file of your template.
This is a tricky one...
There is
body {
color: #fff;
}
on several places of your CSS. That means bullets are there, but white. Background is white as well. Remove that color: #fff;.
EDIT: Added DevTools print screen showing the problem:
Just remove this from basics.css
ul {
list-style: outside;
padding-left: 0;
}
BTW, this template is pretty poorly coded. I'm anticipating it will give you more headaches than this!