How to change the product barcode styles?

WooCommerce Ultimate Barcodes provides a set of specific CSS classes that can be used to apply new styles to product barcodes, either on frontend or PDF documents.

Styling product barcode in PDF documents #

Because this barcode plugin integrates with our WooCommerce PDF documents plugin, you could follow this customization instructions to style your barcodes too, using the classes below:

add_action( 'wpo_wcpdf_custom_styles', 'wpo_wcpdf_custom_styles', 10, 2 );
function wpo_wcpdf_custom_styles ( $document_type, $document ) {
    ?>
    .wcub_product_barcode img {
        width: 40mm;
    }
    <?php
}

Or specifying the barcode type class:

add_action( 'wpo_wcpdf_custom_styles', 'wpo_wcpdf_custom_styles', 10, 2 );
function wpo_wcpdf_custom_styles ( $document_type, $document ) {
    ?>
    .wcub_product_barcode .qrcode img {
        width: 40mm;
    }
    <?php
}

Styling product barcode in frontend product page #

Works similar to above, but in this case you will place the CSS instructions directly in your WordPress theme. To do that you just need to go under Appearance > Customize > Additional CSS, and paste one of the code snippet below:

.wcub_product_barcode img {
    width: 40mm;
}

Or specifying the barcode type class:

.wcub_product_barcode .qrcode img {
    width: 40mm;
}