Other Tables – Inline Style Overridden

  • briangardenofone

    (@briangardenofone)


    4 years, 3 months ago

    Hello!

    Thank you for your work.

    We have added a table to a custom woocommerce e-mail template for a custom woocommerce e-mail class, and the inline-styles are being overridden by the Kadance Email Customizer.

    How can we style tables that are part of a woocommerce e-mail that aren’t the order table?

    I was thinking I might be able to hook into the Kadence E-mail plugin, but I couldn’t make sense of where this is happening in your code.

    Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • hannah

    (@hannahritner)

    4 years, 2 months ago

    Hey,
    Thanks for reaching out! Sorry about the delay. Can you tell me what table you’ve added? And where you added it?

    Thanks,
    Hannah

    Plugin Contributor Ben Ritner – Kadence WP

    (@britner)

    4 years, 2 months ago

    Hi, if you want to style a table totally differently make sure you don’t use a ‘tb’ class and you add your table outside of the normal higharchy.

    Ben

    Thread Starter briangardenofone

    (@briangardenofone)

    4 years, 2 months ago

    Hi Hannah!
    (Hi Ben!)

    I didn’t use any classes. ..and I’m not sure what you mean by the “Normal Hierarchy”

    We have a custom woocommerce e-mail:
    class our_class extends WC_Email { …

    The table is generated in the email class with a loop:

    ...
$temp_running_total_output .= '<tr>';
$temp_running_total_output .= '<th {attr_th_style}>' . $temp_display_name . '</th>';
$temp_running_total_output .= '<td {attr_td_style}>' . $temp_field . ' ' . $temp_info['units'] . '</td>';
$temp_running_total_output .= '</tr>’;
...

    It’s passed to the email template which adds the style:

    ...
		$search = array(
			'{attr_table_style}',
			'{attr_th_style}',
			'{attr_td_style}' );
		$replace = array(
			'style="border-collapse: collapse; border: 2px solid #959c97; background-color: #fafafa;"', //Table Style
			'border: 1px solid #959c97;',  //Table Header Style
			'border: 1px solid #959c97;'  //Table Element Style
			
		);
		str_replace( $search , $replace , $guides['attributes-display'] ) ;
...

    Any inline styling then gets stripped out by Kadence. The table still shows, but not with the borders, etc.

    Plugin Contributor Ben Ritner – Kadence WP

    (@britner)

    4 years, 2 months ago

    Hi so Kadence adds styling (this is intentional) and it doesn’t strip out your styles it just applies these styles to the Woocommerce core email styles. Then woocommerce will take all that css and apply it inline, in some cases overriding any inline styling with the custom styles applied through woocommerce email styles.

    You need to add a class to your table and then style the table and apply the styles through woocommerce email styles.

    See this as an example: https://github.com/woocommerce/woocommerce/blob/02085a084f517301da24bf5e939db7c2b0ae1afa/plugins/woocommerce/includes/emails/class-wc-email.php#L560

    You want to use the filter there are apply your styling before woocommerce core adds all the styles inline.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Other Tables – Inline Style Overridden’ is closed to new replies.