Community Forums › Forums › Archived Forums › Design Tips and Tricks › A Modern Studio Pro css incompatibility with Woocommerce
- This topic has 1 reply, 2 voices, and was last updated 7 years, 10 months ago by Victor Font.
-
AuthorPosts
-
June 12, 2016 at 12:42 pm #187438janiehMember
Modern Studio's input type number form element does not seem compatible with Woocommerce. The numbers are obscured by the up and down arrows. When I disable Modern Studio Pro and enable the Genesis Sample Theme, the numbers are visible along side the up and down arrows in both the Safari and Chrome browsers. (I haven't tested it in any other browsers yet.)
This is the HTML code that Woocommerce creates for the form:<form class="cart" method="post" enctype='multipart/form-data'> <div class="quantity"> <input type="number" step="1" min="1" max="4" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" /> </div> <input type="hidden" name="add-to-cart" value="856" /> <button type="submit" class="single_add_to_cart_button button alt">Add to cart</button> </form>
The problem seems to involve the element's size, but so far I have not been able to find the offending css code in Modern Studio Pro's style.css stylesheet. ***Please do not attempt to purchase this product as my shopping cart is still in development (due to this problem).***
How best should this be rectified? Should I try to fix the css or use a separate Genesis theme that is specifically listed as woocommerce compatible for my shopping cart? (I haven't looked into trying to fix a couple of other minor css problems that I can see so far, and have not tested the full woocommerce shopping cart set-up yet, so there may be further issues.)
Thank you, in advance, for any suggestions or letting me know how you handled this type of situation.
http://www.luckyducksoaps.com/product/fairy-moss-rosemary-mint-soap/?v=64d9eed322b0June 12, 2016 at 1:14 pm #187439Victor FontModeratorThere is no CSS in Modern Studio Pro to adjust the width of the number input. The CSS driving the width is in WooCommerce.css at line 169
.woocommerce .quantity .qty { width: 3.631em; text-align: center; }
You can't change it in the WooCommerce file because it will be overwritten by the next WC update. You could add the block above to the Modern Pro style sheet and change the width to 5em, but it won't work until you adjust the load order of the child theme's style.css. Out of the box, the child theme's style sheet loads before the WooCommerce style sheets. Because of this, WooCommerce has the priority. If you want to override the WooCommerce styles, you have to load WooCommerce first and the child theme styles afterward. This article will show you how: http://victorfont.com/change-genesis-child-theme-style-sheet-load-order/
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet? -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.