TM Extra Product Options integration

Hi Eli,
A good way to go about this is to (temporarily) enable HTML output for the PDF plugin in the Status tab of the settings. You can then inspect the element in the browser to see whether the data is separated by HTML elements. If this is the case, then you can add linebreaks like I have done with regular WooCommerce variation data in the simple template:

dd:after {
	content: "\A";
	white-space: pre;
}

Hope that helps!

Ewout

Hi Ewout, Thanks for the suggestion!
Unfortunately, this is how the data is being displayed in html format (no HTML tags – just all one <p> tag wrapping that information. Is there a way to add in tags for that somehow?

Here’s the output:

<span class="item-name">Founder's Club 31 Bar Flavor Selector</span>
<span class="item-meta"><dl class="variation">
<dt class="variation-ChooseyourFlavorsPleaseselectatotalof31bars">Choose your Flavors! (Please select a total of 31 bars):</dt>
<dd class="variation-ChooseyourFlavorsPleaseselectatotalof31bars">
<p>Almond Mocha Crunch x 6,Chocolate Praline x 6,Chocolate Squared x 6,ChocoNut x 6,Espresso x 5,THE PRIMAL: ChunkyChoco Walnut,THE PRIMAL: Coconut Rage</p>
</dd>
</dl></span>

Hi Eli,
You can do this by filtering the data used by the PDF invoice plugin. Add this to your theme functions:

add_filter( 'wpo_wcpdf_order_item_data', 'wpo_wcpdf_bar_flavours', 10, 2 );
function wpo_wcpdf_bar_flavours ( $item, $order ) {
    // check if 31 bars product
    if ( !empty($item['meta']) && strpos($item['meta'],'ChooseyourFlavorsPleaseselectatotalof31bars') !== false ) {
        // replace comma with a linebreak
        $item['meta'] = str_replace(',', '<br>', $item['meta']);
    }

    return $item;
}

I can’t test this, but this should get you on track ??

Ewout

You’ve done it again! Awesome! Worked perfectly without having to change anything!

I had to add in some css to get it looking right, as the <dt> element was still appearing on one line with the first product.

I simply added this code to the stylesheet:

dt.variation-ChooseyourFlavorsPleaseselectatotalof31bars {font-weight:bold;}
dd.variation-ChooseyourFlavorsPleaseselectatotalof31bars:before {
content:"\a";
white-space: pre;
}

And, since we have several subscriptions, ALL with different classes, I had to duplicate the code and replace the “ChooseyourFlavorsPleaseselectatotalof31bars” with the appropriate class.

I’m going to make sure the people who are using this plugin are able to reuse that snippet for there invoices/packing slips, so I’m going to post this snippet on the help forums for the TM Extra Product Options. You’ve helped way more than just one person!

Thank you so much!

Hi Eli,
Glad to hear it works so well for you!
You could probably even do this without the extra CSS by doing two things:

• Not checking for the specific ChooseyourFlavorsPleaseselectatotalof31bars class/string or making it less specific
• adding the linebreak before the dd with the same filter

Something like this (checks for variation-Choose instead of ChooseyourFlavorsPleaseselectatotalof31bars):

add_filter( 'wpo_wcpdf_order_item_data', 'wpo_wcpdf_bar_flavours', 10, 2 );
function wpo_wcpdf_bar_flavours ( $item, $order ) {
    // check if 31 bars product
    if ( !empty($item['meta']) && strpos($item['meta'],'variation-Choose') !== false ) {
        // replace comma with a linebreak
        $item['meta'] = str_replace(',', '<br>', $item['meta']);
        // insert a linebreak before the p (inside dd)
        $item['meta'] = str_replace('<p>', '<br><p>', $item['meta']);
    }

    return $item;
}

or if you don’t need the check for this specific class and want to replace all commas with linebreaks:

add_filter( 'wpo_wcpdf_order_item_data', 'wpo_wcpdf_bar_flavours', 10, 2 );
function wpo_wcpdf_bar_flavours ( $item, $order ) {
    // replace comma with a linebreak
    $item['meta'] = str_replace(',', '<br>', $item['meta']);
    // insert a linebreak before the p (inside dd)
    $item['meta'] = str_replace('<p>', '<br><p>', $item['meta']);
    return $item;
}

Hope that helps ??

Have a great day!