Styling Custom Fields

  • Hi there,

    I’m having trouble increasing the font size and changing the font color of a custom field within a packing slip. I’m totally new to CSS and other web coding.

    I was able to successfully change the font size of all the body text by following these instructions and Code Snippets.

    But, I’m not sure how to do this for custom fields. I have another plugin that allows for users to add options to their products (Woocommerce Advanced Product Fields), and this plugin integrates with Woocommerce PDF Invoices and Packing Slips. Currently, the data I need shows up on the packing slip without me doing anything– I just need to change its font size and color.

    If I look at an order made with custom fields, I can use the Woocommerce Toolkit to see the meta field
    “>> _wapf_meta”

    This is along with other meta tags like “>> _qty”, “>> _tax_class”, and others.

    I’m not sure what the >> signifies, but it’s present with meta tags that start with an underscore, and not present when the meta tag starts with a character– for example, I see the meta tag “>> _wapf_meta” and I see “Order_item_name”. I’m new to this, I’m sorry that I need some of this basic info answered too.

    How can I use Code Snippets to change the font size and color of items that appear to be categorized by this “_wapf_meta” tag?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor alexmigf

    (@alexmigf)

    Hello @uzair835

    Can you show me a screenshot of your PDF document indicating the data you want to style?

    Let me know.

    Thread Starter uzair835

    (@uzair835)

    Hey Alex,

    I figured out how to change font sizes and colors, but I have a follow up question!

    Here’s a screenshot: https://imgur.com/a/3ruEq6y

    I figured it out by opening the packing slip as HTML and using inspect element to find that the section I was interested in was labeled as .wc-item-meta.

    Right now, I’m able to control the font size and color of that whole section. I’d like to see if I can change the text color IF that field contains the word “Upgraded”. Here’s the code snippet I have currently:

    add_action( 'wpo_wcpdf_custom_styles', 'wpo_wcpdf_custom_styles', 10, 2 );
function wpo_wcpdf_custom_styles ( $document_type, $document ) {
    ?>

    .order-details thead th {
        color: white; /* this is the text color of the header row */
        background-color: black;
        border: 0 0 2pt 0;
        border-color: black;
    }

	/* Change font style of general body */
	body {
	font-size: 12pt; /* default = 9pt */
	}

	/* Change font style of product addition tabs */
	
	.wc-item-meta {
	margin: 4px 0;
    font-size: 11pt;
    line-height: 10pt;
	}
    <?php
}

    The code snippet starts with overall styling (pulled from the example on the plugin website), then it styles the body text, then it styles the text I’m interested in. How can I style the .wc-item-meta if it contains a specific piece of text?
    I tried:

    
$word="Upgraded";
if(strpos(.wc-item-meta, $word) !== false){
    color: red;
} else{
    color: black;
}

    But I’m shooting in the dark with that one really.

    Let me know if there’s a way to accomplish what I’m looking for!

    Plugin Contributor kluver

    (@kluver)

    Hi @uzair835,

    The following code snippet should add the upgraded class to each item row when the word ‘Upgraded’ is present in the item meta:

    add_filter( 'wpo_wcpdf_item_row_class', 'wpo_wcpdf_add_class_for_upgraded_item_meta', 10, 4 );
function wpo_wcpdf_add_class_for_upgraded_item_meta( $classes, $template_type, $order, $item_id_extra ) {
	$item = $order->get_item( $item_id_extra );
	$meta = wc_display_item_meta( $item, array( 'echo' => false) );
	if ( strpos( $meta, 'Upgraded' ) ) {
		$classes .= ' upgraded';
	}
	return $classes;
}

    You can then base your CSS of that:

    tr.upgraded .wc-item-meta { color: red; }

    • This reply was modified 4 years, 5 months ago by kluver.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Styling Custom Fields’ is closed to new replies.