Not in table form WooCommerce SIngle product page additional information tab

Question

Recently I have come up with a project to create a WooCommerce website and as I am working on the project I came up with an idea to display the product's additional information tab, not in tabular form, just like regular product information. I have already removed the tab and shown additional information before hook woocommerce_before_add_to_cart_form.

For inspiration, I have wanted to make the table information look something like

Is there any way to achieve something like this?

Mine looks something like this

Edit 1: I am also trying to change the font size.

Answer 1

Copy the below code into a file named product-attributes.php in the location yourtheme/woocommerce/single-product/product-attributes.php in your active theme ( child-theme ).

<?php
/**
 * Product attributes
 *
 * Used by list_attributes() in the products class.
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/single-product/product-attributes.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce\Templates
 * @version 3.6.0
 */
defined('ABSPATH') || exit;

if (!$product_attributes) {
    return;
}
?>

<div>
    <?php foreach ($product_attributes as $product_attribute_key => $product_attribute) : ?>
        <div>
            <label style="font-weight: bold"><?php echo wp_kses_post($product_attribute['label']); ?></label><br/>
            <span><?php echo wp_kses_post($product_attribute['value']); ?></span><br/>
        </div>
    <?php endforeach; ?>
</div>