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
Related
I have been trying to remove this breadcrumb feature from my WordPress site but don't know how to do. Please help. It shows in every page.
I want to remove from all pages.
You can use this CSS:
nav.woocommerce-breadcrumb {
display: none;
}
This can be added via a child theme or within your WordPress Customizer
.
In your child-theme or custom CSS box, add the following code:
.woocommerce-breadcrumb {
display: none;
}
If that doesn't work, use !important like so:
.woocommerce-breadcrumb {
display: none !important;
}
Do not use !important unless necessary and only edit your child-theme or you will lose this modification on next theme update.
It's best to put the above code in the CSS box if your theme has one. It can usually be found under 'Theme Options' in wp-admin.
The code I gave will simply hide the concerned CSS class.
Hope this helps.
i downloaded a plugin in wordpress called WP Hotel Booking using Divi Theme Builder.
This is his actual design in my site:
How can i align these elements side by side like this?
I guess the problem is since its a wordpress theme and i didnt created that one, i can only use css to try do these changes.
This is the actual website if needed to try with console: http://198.199.66.183/ (yep, no domain yet)
These are the css class:
.hb_input_date_check {
/* arrival/departure date*/
}
.entry-content .hotel-booking-search select {
/* adults/children */
}
.entry-content .hotel-booking-search form button {
/* the button */
}
Can someone please help me? Thanks!
Give this a shot:
Inside your custom styles for this respective website, add these styles to the parent wrapper of the form. I've tested this with your current code & theme, and it appears to work:
.hb-form-table {
display: flex;
justify-content: space-between;
}
What this will do is ensure that the items are in a flexible container, not allowing them to go to the next row. Some additional CSS will be required to ensure that the input fields all have the same padding, and height(s). If you're new to flex-box, here's a full guide on how to use it, along with all of it's attributes: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
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.
By default on the right side of single product it shows sidebar. The point is that we need side bar only on the Shop page where are located all products. It includes all filters as well as rated products. But on the single product description page we want to remove right side bar. Because in that page it shows only rated products in sidebar. It was there by default. Is there any way to remove it from that page?
This solution i create in 2021 works very good (sorry my english)
/*Single product page no sidebar*/
#blog #sidebar {
display: none;
}
#blog .col-md-push-3 {
left: unset;
}
#blog .col-md-9 {
width: 100%;
}
put this code in main page css code
Visit https://rgrepairofice.ddns.net/loja/gta-v
to check result, if you like it do what i said above
Gaspar Pereira, from rgrepairofice
Currently in the file templates/single-product.php the sidebar is called
/**
* woocommerce_sidebar hook.
*
* #hooked woocommerce_get_sidebar - 10
*/
do_action( 'woocommerce_sidebar' );
Therefore you can remove it with remove_action('woocommerce_sidebar', 'woocommerce_get_sidebar', 10); or wrap it to make sure it only affects single product pages:
if ( is_product() ) {
remove_action('woocommerce_sidebar', 'woocommerce_get_sidebar', 10);
}
Here is the documentation for other conditional tags if you need to get rid of it somewhere else and it uses the same action: https://docs.woocommerce.com/document/conditional-tags/
It all depends on the theme that you are using, as sometimes there is even an option in the theme options or the Customizer for changing layouts to different pages.
Through code, you could probably replace the single-product.php with a page template file that has no sidebar and then reinsert the missing WooCommerce tags, so that WooCommerce does it's magic on the page.
You could try going to [project-name]/wp-content/themes/[theme-name]/woocommerce/single-product.php and look for this line:
do_action( 'woocommerce_sidebar' );
And remove the line or comment it out.
You can also remove the sidebar with CSS only and not touching the PHP files if you don't want to!
For example the following simple CSS codes work like a charm with the Storefront theme (currently that I'm writing this, the theme version is 4.1.0)
.single-product #primary {
width: 100%;
}
.single-product #secondary {
display: none;
}
You won't be able to accomplish this by default with WooCommerce and WordPress. However, it's easy to accomplish if you're not looking to dive into code. A popular choice is Widget Visibility by Jetpack. If you're looking to dive into code, I recommend asking a new question with more details on what you tried to do already.
I am using the Shopify plugin which inserts Shopify products into Wordpress. I am trying to hide the image that gets brought in via the shortode. I've tried css and jquery but can't get it to be hidden.
So link for example: http://dev.whydidibother.com/airdecksltd_09_09_16/shop/6-board-pod/ - it is the image directly above the title and price.
Thanks
Try adding the following CSS:
.product-embed__image {
display: none;
}