CSS table issue Woocommerce and Magazine Pro

[Peaceless]

Hi all!

I initially was so happy that I got the styling good on my cart page, only to realise the table used in the cart is the same as on the account page and on checkout. This is leading to some not so good looking things, like text floating to the right of these tables that have width: 75%;. So I have used inspect elements in crome to figure out how to be more precise in the styling but it´s not working 🙁
The result in inspect element is giving me .woocommerce table.shop_table to style (the table used in multiple places I guess) but I see the class in the page html <table class="shop_table cart” cellspacing=" 0"=""> the yellow pup-up on the page and also the filed right below the HTML says table.shop_table.cart so I´m for one a bit confused as to what I´m supposed to use (with or without "." but still, I have tried
table.shop_table.cart
table.shop_table cart
.table.shop_table cart
.table.shop_table.cart
.woocommerce table.shop_table cart
.woocommerce table.shop_table.cart

and none of them has any effect what so ever. I also tried going in to cart.php and I managed to change the color to the entire table that way, but the width? Nope!
So now I ask you guys, what am I missing on my trial&error error error road?

Thanks in advance!

?…sa

[Victor Font]

First, WooCommerce loads its style sheet after the style.css for your theme. With CSS, the last style loaded has the priority in the browser. Adding WooCommerce styles to your theme's style.css will never work unless you use the !important qualifier or change the load order of the style sheets. This article will explain how: http://victorfont.com/change-genesis-child-theme-style-sheet-load-order/

The space when stacking classes in a style makes no difference. .woocommerce.shop and .woocommerce .shop are the same to the browser.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Peaceless]

Hi Victor!
Thanks! Maybe I should have mentioned that I activated Genesis Style Trump plugin to up the loading of the theme style sheet. Looking at the source code I saw that the genesis slider is still loading after the Magazine pro style sheet, so I went ahead and deactivated the plugin and added the below code (not sure if the slider css has any effect on this, it´s built in from the start right?) Anyways, don´t hurt to try

/**
 * Remove Genesis child theme style sheet
 * @uses  genesis_meta  <genesis/lib/css/load-styles.php>
*/ 
remove_action( 'genesis_meta', 'genesis_load_stylesheet' );
/**
 * Enqueue Genesis child theme style sheet at higher priority
 * @uses wp_enqueue_scripts <http://codex.wordpress.org/Function_Reference/wp_enqueue_style>
 */
add_action( 'wp_enqueue_scripts', 'genesis_enqueue_main_stylesheet', 30 );

in functions.php Still same result so I tried higher and higher number and even 100000000 did not have any effect on this. Slider still loads after.

So if I assume it´s ok that the theme css is ok to load second to last I need to turn to my css styling again to see if I´m making wrong assumptions there instead.

So if I have a table class like so, table class="shop_table cart”, which is how it looks in cart.php in woocommerce from the get go, would you say that I´m supposed to use this in my theme css

.woocommerce table.shop_table.cart {} or
.woocommerce table.shop_table cart {}

non are working 🙁 This is making me nutts I tell you!

Thanks for your time!

[Author]

Posts