Search Results for 'woocommerce'

Hi Heather-

I have to admit the CSS issue had me very confused for a while, but I’ve spotted the issue.

If you examine your Child Theme’s CSS file, you’ll see that your very first rule is missing the closing curly bracket }:

.btn-3d, .palette-primary .button-primary, .palette-primary .woocommerce .button, .palette-primary .button-secondary, .palette-primary .woocommerce .alt.button {
 background-image: linear-gradient(180deg, #130b19 0%, #094275 50%, #0f95d8 100%)

That’s causing the entire rest of the rules not to apply at all.

Let’s wait and hear back from WooCommerce Stripe support, I’m afraid I’m a little out of my depth with that shipping cost. I can’t think of a way that the theme itself would prevent the shipping cost from calculating for Google Pay, and not for Apple Pay. It would seem to me that if one of them can do it, the other should be able to as well.

Hi Heather-

I’m glad to hear we’re making progress!

That screenshot is helpful. In it, you can see that your website is looking for a file called checkout.js, but it’s actually looking for it in your Child Theme’s folders (/wp-content/themes/boldgrid-cobalt-child/js/checkout.js), even though that file should be provided by WooCommerce itself (in /wp-content/plugins/woocommerce/assets/js/frontend/checkout.js).

The other useful piece of information we can glean from this screenshot is the ?ver=5.3.0 at the end. That’s WooCommerce’s current version number, so that likely means that WooCommerce itself is trying to load it from the Theme’s directory instead of its own.

I did a little digging in both the Stripe Gateway and core WooCommerce plugin, and as far as I can tell it should be loading from within WooCommerce’s directory.

One way you might be able to get around that is to simply copy WooCommerce’s checkout.js file from the plugin into your Child Theme, but you’ll need to remember to update it whenever WooCommerce updates it. If your tech can access SSH, a better way would be to use a Unix Symbolic Link so that the copy in the child theme always links directly to the copy in WooCommerce, for example (from your WordPress root directory):

ln -s ./wp-content/plugins/woocommerce/assets/js/frontend/checkout.js ./wp-content/themes/boldgrid-cobalt-child/js/checkout.js

I’m afraid I couldn’t find any information about the issue with Shipping calculations. It sounds like the plugin is having trouble accessing the shipping address from Google Pay to make the calculation. When I tried going through your order process with Google Pay, I saw a shipping cost of $9.00 for the spiral notebook to Denver, CO. Does that sound right?

The issue with it accepting any Credit Card number without checking the Expiration or CVV code sounds like it could be that it’s still in “Test Mode.” Check on WooCommerce > Payments > Stripe and see if the checkbox to Enable Test Mode is still checked.

Finally, to see the update for Cobalt, you must have the BoldGrid Inspirations plugin active. You can also download Cobalt 1.3.8 directly from this link and install it from the Appearance > Themes > Add New menu. As far as I can tell, it looks like your tech and the Child Theme plugin worked just fine.

Hi Heather-

That’s really a head-scratcher! It looks like this might even be a bug in Firefox itself, because you can see the Firefox Developer Tools conflicting with itself:

While it’s true that the vertical-align: middle; rule only applies to inline elements, you can clearly see that this element is, in fact, inline.

I did find a workaround, however, by changing the parent element to a block, which seems to work as expected in both Chrome and Firefox:

.woocommerce form .form-row label.checkbox, .woocommerce-page form .form-row label.checkbox {
	display: block !important;
}

Hi Heather-

That does seem really weird. Even when I use Firefox, if I’m logged into Amazon, I don’t see the additional password field.

I glanced at the WooCommerce documentation, and I did notice that there is a setting about automatically creating the password, do you have that enabled?

Hi Heather-

You’re right that if you update the theme, your modifications will be lost.

The ideal way to handle this is to actually create a child theme for Cobalt. When you need to customize a file, you copy it from the parent theme into your child theme (with the same directory structure) and make modifications there. That way, when the theme updates, the files you customize stay like they are, and the parent gets the new updates.

As an aside, I moved your reply to our other conversation to your other topic thread here.

Hi Heather!

I took a look at the Quick View for Single Products in your WooCommerce shop and I believe I have a CSS solution that might work for you. It seems like changing the cart submission form within that window to use a flex row is what you are looking for. The following code should help you get that submit button aligned next to the quantity input field.

.palette-primary.woocommerce-page .xoo-qv-container.single-product form.cart {
	flex-direction: row;
}

.palette-primary.woocommerce-page .xoo-qv-container.single-product form.cart .quantity.input-group {
	flex: 0;
}

Please let us know if you have any other questions!

Hello Raf,
Thank you for your reply.
Please check out our FAQ for more details about the regex when excluding the pages.
As for the Yith wishlist, please check out their documentation for caching issues.
Thanks!

Hi Heather-

Thanks for the great question, and thanks for choosing the Cobalt WordPress Theme.

I think I’ve got a simple CSS rule that you can add to your Customize > Advanced > Custom JS & CSS Custom CSS field that should solve this for you:

.palette-primary.woocommerce-page div.product form.cart, .palette-primary.woocommerce-page div.product p.cart, .palette-primary.woocommerce div.product form.cart, .palette-primary.woocommerce div.product p.cart {
    flex-direction: column;
    align-items: unset;
}

If that doesn’t do the trick at first, add !important to each rule, like so:

.palette-primary.woocommerce-page div.product form.cart, .palette-primary.woocommerce-page div.product p.cart, .palette-primary.woocommerce div.product form.cart, .palette-primary.woocommerce div.product p.cart {
    flex-direction: column !important;
    align-items: unset !important;
}

Hello Raf,

Thank you for reaching out.

Yes, as suggested those pages should be excused from the cache. Woocommernce added a DONOTCACHEPAGE constant to some templates so it’s not necessary, however, it’s best to exclude those pages from the cache. You can check out this article for more details.
As for the WPML, W3 Total Cache is compatible with the WPML, however, in some cases the Pro extension is needed to improve the caching performance of websites localized by WPML.
Localization is a type of personalization that makes websites more difficult to scale. This extension reduces the response time of websites localized by WPML.
Thanks!

Hi Heather!

I took a look at your Checkout page and I wrote some CSS that should allow that Create an Account? button to stretch to the length of the other bars on that page.


.woocommerce-checkout .create-account .woocommerce-form__label-for-checkbox {
display: flex;
align-items: center;
}
.woocommerce-checkout .create-account .woocommerce-form__label-for-checkbox span {
width: 100%;
}


That code worked in the development tools in my browser, so hopefully it has the same effect when implemented through your website’s Customizer.

I think the best place to get help for the issues with the Asset Cleanup plugin is in their public support forums on WordPress.org. Their team should be able to help you write the appropriate enqueue scripts so you don’t have to reload your CSS on every WooCommerce page if you make a change. I also recommend trying out Code Snippets for managing custom PHP scripts on your website. That plugin allows you to add custom PHP without having to directly modify the functions.php file in your theme and should prevent your custom code from being overwritten whenever the theme files are updated.

Please let us know if you have any other questions for us!

Hi Heather-

Thanks for reaching out, and thanks for the question about using WooCommerce with the Cobalt WordPress Theme. And a special thanks for helping us comply with the WordPress Forum guidelines by moving your original question over here.

As I mentioned in the original question, your Custom CSS code here would normally work out-of-the-box with Cobalt, but it looks like you have another Custom CSS rule that’s interfering:

.container,.infinite-footer-container,.page-template-template-builder-php .entry-content>.twitter-share {
padding: 0 100px;
}

Since that rule uses the general .container class, it’s also adding 100 pixels on both the left- and right-side of your mobile view. I’d modify your Custom CSS rule like this:

@media screen and (max-width: 768px) { 
.woocommerce ul.products[class*=columns-] li.product, 
.woocommerce-page ul.products[class*=columns-] li.product { 
width: 100% !important; 
} 
main.container { padding: 0 10px; }
}

That way, you can keep the custom padding on .container as well as make sure that your products are large enough on narrow screens. You can adjust the 10px value to suit your preferences.

Hi Klaus!

I took a look at the differences in the style rules for that button between the WooCommerce generated pages and the ones you created on your own, and I might have a solution for you.

The WooCommerce stylesheet contains that following rule for the search button which only appears to load on pages generated by the plugin:

.woocommerce .widget_product_search button,
.woocommerce-page .widget_product_search button {
flex: 0 0 auto;
padding: 10px 20px;
}

If you want the button to look the same on all pages then you could try swapping out the width adjustment in your custom code with the flex and padding settings from the WooCommerce stylesheet. The new code will look like this:

form.woocommerce-product-search button { flex: 0 0 auto; padding: 10px 20px; }

Please let us know how the new code works out!

Hi Klaus-

Thanks for reaching out! We’ll be happy to help you get that search button fixed.

Generally speaking, this is happening due to a style in the Astra theme that you’re using, but you can use a little bit of Custom CSS to fix it. Navigate to Customize > Additional CSS and add this line:

form.woocommerce-product-search button { width: 200px; }

Hi Mahmoud-

Thanks for reaching out and for your interest in the Total Upkeep WordPress backup plugin.

I’m assuming that you’re referring to Products in the WooCommerce Plugin, please correct me if you’re working with a different plugin for your products.

WooCommerce creates custom database tables with things like your orders, tax rates, and other things, but it stores your Products in the main wp_posts database table. So that means that if you’re restoring your products, you’ll also be restoring your Pages, Posts, and other Custom Post Types.

Hi Joshua-

Thanks for your interest in W3 Total Cache Pro! Because of the dynamic nature of the WooCommerce Bookings plugin, that content should be excluded from your Page Cache.

There are two ways you can fix this, the “right” way, and the easy way.

First, the easy way- you can exclude your bookings pages from the Page Cache. Give your bookings products a category or tag, then add that category or tag to the Performance > Page Cache > Advanced > Never cache pages associated with these categories / Never cache pages that use these tags. Alternatively, you can add /products/* to the Never cache the following pages field.

Next, the “right” way. You can use Page Fragment Caching Exceptions in your theme template for the booking product. This will preserve the most performance while still allowing your bookings to behave dynamically. The catch is that you will need to make a child theme and edit your theme templates, and place <!–mfunc –> comments around the booking calendar. If you’d like help setting this up, we also offer Premium Services to help you configure this in your Performance > Support menu.

Hi James-

Thanks a lot for the clarification, I see what you mean now that the Label for the variations was the light color.

Here’s a Custom CSS rule you can use in your Customize > Advanced > Custom JS & CSS menu:

.woocommerce div.product form.cart .variations label {
    color: #333;
}

The color #333 is based on the text in the paragraph just above the selection box, but you can change that according to your taste. Once you have that CSS rule in place, you can change your background color back to white.

Hi James-

Most of the JavaScript in WooCommerce is already minified, so it might not be giving you that much of a boost to minify them using W3TC, and as we’ve seen can sometimes cause unexpected errors.

There are a couple possibilities to solve this. Probably the easiest is to change the Minify method setting in Performance > Minify > JS to Combine only. That will give you the benefit of having fewer JavaScript requests without the double-minifying issue.

Alternatively, you could add WooCommerce’s JavaScript assets to the Never minify the following JS files field. I believe the right one in this case is the /wp-content/plugins/woocommerce/assets/js/zoom/jquery.zoom.min.js, but other JS assets might need to be added as well.

Hi James-

Thanks for reaching out, I’m sorry to hear about the issues with your product images.

I checked out your site, and your product pages don’t look the way that they normally do in the Hydra theme. Normally, a smaller image would be displayed, with the 600-pixel full size only shown as a “preview” when the user hovers over it.

I’m curious if the normal image display is being affected by your Minify settings in W3 Total Cache. Can you disable minify temporarily in your Performance > General menu, and see if that makes your product page look correct? That might also explain the behavior you saw when the Customizer changed, but the front-end of the website did not, if the cache had not been cleared when you checked the page.