Remove extra bullet above the payment method in Woocommerce checkout - css

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...

Related

Woocommerce Checkout page input fields displaying weirdly

Using wordpress 5.2.2 with understrap child theme, woocommerce plugin and Pw woocommerce gift cards plugin https://www.pimwick.com/gift-cards/
The input fields on the checkout page display incorrectly
However when I activate the theme tweenty seventeen they display correctly
where could the problem come from?
How to get the fields to display correctly with the understrap child theme?
Finally found the solution !!
Following this thread
This
.woocommerce-billing-fields .form-row,
.woocommerce-shipping-fields .form-row {
display: block;
}
took care of the billing field and this took care of the additional information field
.woocommerce-billing-fields .form-row,
.woocommerce-shipping-fields .form-row,
.woocommerce-additional-fields .form-row {
display: block;
}
Maybe your theme has been added display: inline-block css to the form. Find them by doing inspect element tool from the browser and change them to display: block

Remove bullets from Select2 Dropdown Options in Woocommerce

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; }

How to remove "Hello Member" in Woocommerce Checkout page?

i want to remove this area, in checkout page, but every my try was not working. I tryed to insert this CSS:
.avada-myaccount-user-column .username {
display:none;
}
This is product that trying to insert into cart, for testing purposes. Someone to help me ?
.avada-myaccount-user-column.username {
display:none;
}
Use that ^. When you have two classes in a DIV you want to target, you don't have spaces between them to target. If it doesn't work, it's possible to override with custom templates. See https://docs.woocommerce.com/document/template-structure/ for theme overrides. Since you're using a premium theme, their support should be able to help you. If you do theme overrides, you should do them in a child theme so you can update the parent theme gracefully as updates come out.
.avada-myaccount-user-column .username will not work because .username is not a child of .avada-myaccount-user-column.
Change your CSS to:
.avada-myaccount-user-column.username {
display: none;
}
This example means the first class requires the second class for it to be affected.

Product view Alignment on Woocommerce

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.

Woocommerce checkout page text for Paypal

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).

Resources