How can I change the product addons to align to the left and not all centred.
I am using the Joyas Pro theme
http://iains14.sg-host.com/product/dg-wood-sunglass/
Example Image
You can achieve it by using CSS. Add the CSS on the product CSS
.ywapo_input_container {
text-align: left !important;
}
.ywapo_group_container.form-row.form-row-wide h3 {
text-align: left !important;
}
Related
I'm trying to change the style of the select (dropdown) field in my Woocommerce checkout page. I'm using it with the DIVI theme.
by default the select field does not have the same height as the other:
I managed to find the part to do that in the css by playing with the padding on this class:
.woocommerce-input-wrapper .select2-container--default .select2-selection--single
but then the select option and the arrow are not in the middle:
I can move the content of the field if I decrease the line-height here:
.select2-container--default .select2-selection--single .select2-selection__rendered
but if I decrease it too much, the text will be cut off
How can I move the content of the field to the middle properly?
Thanks
Try this. Change the 40px in the below code to your desired value. Tested and working in windows, google chrome.
.select2-container .select2-selection--single{
height: 40px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
height: 40px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
line-height: 40px !important;
}
I'm trying to center some content. I've inspected the elements and can't figure out how to add the correct changes to custom CSS. I'm using a widget shortcode so can't edit this directly in Elementor text editor.
I'm in WordPress and use Elementor as my page builder.I tried a generic "div" line, however that centered several things on the home page. I'm looking to center Star Rating and the Add to Cart button. Thanks for any advice. New to working with code and feel like I'm barely missing it, but missing it nonetheless.
Featured Products Widget
This is what I used to center the Product Title and Price.
.woocommerce-loop-product__title, h {text-align: center;}
span.price, h
{text-align: center;}
One of the elements when hovered over shows -
div.star-rating::before
I'm not an expert on CSS, but I think you can use this for the Stars.
.star-rating {
margin: 0 auto 0 !important;
}
and you can use this for the Add to Cart button
.woocommerce ul.products li.product .button, .woocommerce-page ul.products li.product .button {
margin-top: .5em;
margin-bottom: .5em;
white-space: normal;
line-height: 1.3;
margin-left: 4em;
}
This is how it looks for me.
if this help you, don't forget to mark the answer.
I use WordPress + WooCommerce to develop a website. I implement Products widget in the Elementor. I want to have red background #EC1D38 for the product title as shown as the image. The default settings do not have the background color setting. Any help will be appreciated. Thanks.
Sample
Current situation
I've added one class in your div is called "fruits".
Please add the below CSS to your CSS file.
.fruits h2.woocommerce-loop-product__title {
background: #ec1d38;
color: white !important;
padding: 15px;
margin: 0;
}
.fruits li.product.type-product {
padding: 0 !important;
}
.fruits a.button.product_type_simple {
display: none;
}
There is great documentation on how to change or remove the handheld menu links in WooCommerce available. However, I have noticed that many mobile designs (mweb and apps) are trending towards showing text as well as icons for handheld menus. I want to display the text for the link UNDERNEATH the icon, as well as the icon itself.
It looks like WooCommerce has intentionally hidden the text for the handheld link using CSS:
.storefront-handheld-footer-bar ul li>a {
height: 4.235801032em;
display: block;
position: relative;
text-indent: -9999px;
z-index: 999;
border-right: 1px solid rgba(255, 255, 255, .2)
}
My suspicion is that I should just change the text-indent and the text will show back up. For example, in the instructions provided by WooCommerce to add a new home link to the handheld menu, my thought was that changing text-indent in the CSS would allow me to display both the icon and 'Home'.
function jk_home_link() {
echo '' . __( 'Home' ) . '';
}
But, I can't quite figure out how to "undo" the text-indent so that the text for the link shows as well. Any thoughts?
The text is hidden due to "text-indent: -9999px;" so you can change it as follows.
Here I am additionally added "line-height:" to arrange position of the text.
.storefront-handheld-footer-bar ul li > a {
text-indent: 0px;
line-height: 95px;
}
If you need to adjust position of the icons, you can add following css and make changes on the value.
.storefront-handheld-footer-bar ul li>a::before {
line-height: 2;
}
I am using Woocommerce - Boutique theme.
This theme has a price banner on the category pages that I have wrestling with. In the standard theme, it is on the top of the product image, and semi blocks the image, so I moved it to the bottom of the product image, and with in-between screen sizes, it now blocks the category product name text below the image. In mobile view, the price banner moves way to the right.
I would love it if I could get the price banner to behave,and stay with the product image and not block anything or move, but failing that, I would like to just have the price as plain text below the product and product title - so that it looks the same on any size screen - if anyone can perhaps take a look and see how I can accomplish this - I am at a loss.
Months ago in the Boutique forum I was given the below solution - but it did not do anything to change the banner for me - it didnt change anything..
span.price {
color: black;
background: none;
position: relative;
box-shadow: none;
}
span.price:after {
display: none;
}
The site I need help with is here
I figured it out
/* REMOVE PRICE BANNER MEDIA ALL*/
ul.products li.product .price {
position: relative;
top: .01em;
padding: .1253em .3857em;
background: none;
color: black;
box-shadow: none;
font-weight: 400;
}
ul.products li.product .price:after {
display: none;
}