Question posted in 
I am trying to design bank details on Woocommerce thank you page. Highlighted section which I want to edit is showed in attached screenshot.
Just in case you will need the HTML code showed above:
<div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column">
<div class="fusion-separator fusion-no-medium-visibility fusion-no-large-visibility fusion-full-width-sep" style="align-self: center;margin-left: auto;margin-right: auto;margin-top:45px;margin-bottom:45px;width:100%;">
<div class="fusion-separator-border sep-single sep-solid" style="--awb-height:20px;--awb-amount:20px;--awb-sep-color:rgba(101,106,112,0.33);border-color:rgba(101,106,112,0.33);border-top-width:1px;"></div>
</div>
<section class="awb-woo-order-additional-info awb-woo-order-additional-info--1">
<section class="woocommerce-bacs-bank-details">
<h2 class="wc-bacs-bank-details-heading fusion-responsive-typography-calculated" data-fontsize="44" style="--fontSize: 44; line-height: 1.26;" data-lineheight="55.44px">Naše bankovní spojení</h2>
<h3 class="wc-bacs-bank-details-account-name fusion-responsive-typography-calculated" data-fontsize="28" style="--fontSize: 28; line-height: 1.32;" data-lineheight="36.96px">FIO:</h3>
<ul class="wc-bacs-bank-details order_details bacs_details">
<li class="bank_name">Banka: <strong>FIO banka a.s.</strong>
</li>
<li class="account_number">Číslo účtu: <strong>2202681982/2010</strong>
</li>
<li class="iban">IBAN: <strong>CZ6620100000002202681982</strong>
</li>
<li class="bic">BIC: <strong>FIOBCZPPXXX</strong>
</li>
</ul>
</section>
<img decoding="async" class="qrcodecz" alt="QR platba" src="https://api.paylibo.com/paylibo/generator/czech/image?accountNumber=2202681982&bankCode=2010&amount=11152.50&currency=CZK&vs=4626&message=svetvramu.cz&size=200">
<h2 class="woocommerce-order-details__title fusion-responsive-typography-calculated" data-fontsize="44" style="--fontSize: 44; line-height: 1.26;" data-lineheight="55.44px"> Order extra</h2>
<table class="woocommerce-table shop_table order_details">
<tbody></tbody>
</table>
</section>
</div>
What I want to do is to place the QR code before the list and both should be in one row (QR code first, text info about bank details second).
For the QR code generation I am using custom code in functions.php, attaching below:
add_action( 'woocommerce_thankyou', 'display_order_received_qr_code', 10, 1 );
function display_order_received_qr_code( $order_id ) {
$order = wc_get_order($order_id);
printf('<img class="qrcodecz" alt="QR platba" src="%s" />',
add_query_arg( array(
'accountNumber' => '2202681982',
'bankCode' => '2010',
'amount' => $order->get_total(),
'currency' => 'CZK',
'vs' => $order->get_order_number(),
'message' => 'svetvramu.cz',
'size' => 200,
), 'https://api.paylibo.com/paylibo/generator/czech/image' ),
);
}
Can you give me a hint, where is the place for edit this details? I was trying to edit it via thankyou.php file but I am probably not able to do it right or I am not at the right place.
Edit:
I am attaching the current HTML output of the page in the screenshot but it is automatically generated by the template. Maybe it can be done by editing of the /includes/gateways/bacs/class-wc-gateway-bacs.php file you mentioned.
<div class="fusion-row" style="max-width:100%;">
<section id="content" style="width: 100%;">
<div class="post-content">
<div class="fusion-fullwidth fullwidth-box fusion-builder-row-4 fusion-flex-container has-pattern-background has-mask-background nonhundred-percent-fullwidth non-hundred-percent-height-scrolling" style="--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-padding-top:0%;--awb-padding-bottom:0%;--awb-flex-wrap:wrap;">
<div class="fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap" style="max-width:1320.8px;margin-left: calc(-4% / 2 );margin-right: calc(-4% / 2 );">
<div class="fusion-layout-column fusion_builder_column fusion-builder-column-11 fusion_builder_column_1_1 1_1 fusion-flex-column" style="--awb-padding-top:0px;--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;">
<div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column">
<div class="fusion-title title fusion-title-8 fusion-no-small-visibility fusion-sep-none fusion-title-text fusion-title-size-two">
<h2 class="fusion-title-heading title-heading-left fusion-responsive-typography-calculated" style="margin:0;--fontSize:44;line-height:1.26;">Vaše objednávka č. 4666 byla úspěšně vytvořena.</h2>
</div>
<div class="fusion-title title fusion-title-9 fusion-no-medium-visibility fusion-no-large-visibility fusion-sep-none fusion-title-text fusion-title-size-three">
<h3 class="fusion-title-heading title-heading-left fusion-responsive-typography-calculated" style="margin:0;--fontSize:28;line-height:1.32;">Vaše objednávka č. 4666 byla úspěšně vytvořena.</h3>
</div>
<div class="fusion-text fusion-text-2">
<p>Níže naleznete její shrnutí, které vám tímto zasíláme i na vaši e-mailovou adresu. Produkty skladem odesíláme nejpozději den po objednání. Produkty, které skladem nejsou, odesíláme obvykle nejpozději v rámci tří dnů.</p>
</div>
<div class="fusion-separator fusion-full-width-sep" style="align-self: center;margin-left: auto;margin-right: auto;margin-top:20px;margin-bottom:45px;width:100%;">
<div class="fusion-separator-border sep-single sep-solid" style="--awb-height:20px;--awb-amount:20px;--awb-sep-color:rgba(101,106,112,0.33);border-color:rgba(101,106,112,0.33);border-top-width:1px;"></div>
</div>
</div>
</div>
<div class="fusion-layout-column fusion_builder_column fusion-builder-column-12 fusion_builder_column_1_2 1_2 fusion-flex-column fusion-flex-align-self-center" style="--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:3.84%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:3.84%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;">
<div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column">
<div class="awb-woo-order-details awb-woo-order-details--1" style="--awb-failed-btn-border-w:0px;">
<ul class="awb-woo-order-details__list order_details">
<li class="awb-woo-order-details__order order"> Číslo objednávky: <strong>4666</strong>
</li>
<li class="awb-woo-order-details__date date"> Datum: <strong>24 června, 2024</strong>
</li>
<li class="awb-woo-order-details__email"> E-mail: <strong>[email protected]</strong>
</li>
<li class="awb-woo-order-details__total total"> Cena celkem: <strong>
<span class="woocommerce-Price-amount amount">
<bdi>1109,00 <span class="woocommerce-Price-currencySymbol">Kč</span>
</bdi>
</span>
</strong>
</li>
<li class="awb-woo-order-details__method method"> Platební metoda: <strong>Bankovním převodem</strong>
</li>
</ul>
</div>
</div>
</div>
<div class="fusion-layout-column fusion_builder_column fusion-builder-column-13 fusion_builder_column_1_2 1_2 fusion-flex-column bank_details_qrcode" style="--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:3.84%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:3.84%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;">
<div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column">
<div class="fusion-separator fusion-no-medium-visibility fusion-no-large-visibility fusion-full-width-sep" style="align-self: center;margin-left: auto;margin-right: auto;margin-top:45px;margin-bottom:45px;width:100%;">
<div class="fusion-separator-border sep-single sep-solid" style="--awb-height:20px;--awb-amount:20px;--awb-sep-color:rgba(101,106,112,0.33);border-color:rgba(101,106,112,0.33);border-top-width:1px;"></div>
</div>
<section class="awb-woo-order-additional-info awb-woo-order-additional-info--1">
<section class="woocommerce-bacs-bank-details">
<h2 class="wc-bacs-bank-details-heading fusion-responsive-typography-calculated" data-fontsize="44" style="--fontSize: 44; line-height: 1.26;" data-lineheight="55.44px">Naše bankovní spojení</h2>
<h3 class="wc-bacs-bank-details-account-name fusion-responsive-typography-calculated" data-fontsize="28" style="--fontSize: 28; line-height: 1.32;" data-lineheight="36.96px">FIO:</h3>
<ul class="wc-bacs-bank-details order_details bacs_details">
<li class="bank_name">Banka: <strong>FIO banka a.s.</strong>
</li>
<li class="account_number">Číslo účtu: <strong>2202681982/2010</strong>
</li>
<li class="iban">IBAN: <strong>CZ6620100000002202681982</strong>
</li>
<li class="bic">BIC: <strong>FIOBCZPPXXX</strong>
</li>
</ul>
</section>
<img decoding="async" class="qrcodecz" alt="QR platba" src="https://api.paylibo.com/paylibo/generator/czech/image?accountNumber=2202681982&bankCode=2010&amount=1109.00&currency=CZK&vs=4666&message=svetvramu.cz&size=200">
<h2 class="woocommerce-order-details__title fusion-responsive-typography-calculated" data-fontsize="44" style="--fontSize: 44; line-height: 1.26;" data-lineheight="55.44px"> Order extra</h2>
<table class="woocommerce-table shop_table order_details">
<tbody></tbody>
</table>
</section>
</div>
</div>
<div class="fusion-layout-column fusion_builder_column fusion-builder-column-14 fusion_builder_column_1_1 1_1 fusion-flex-column" style="--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;">
<div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column">
<div class="fusion-separator fusion-full-width-sep" style="align-self: center;margin-left: auto;margin-right: auto;margin-top:45px;margin-bottom:45px;width:100%;">
<div class="fusion-separator-border sep-single sep-solid" style="--awb-height:20px;--awb-amount:20px;--awb-sep-color:rgba(101,106,112,0.33);border-color:rgba(101,106,112,0.33);border-top-width:1px;"></div>
</div>
<section class="awb-woo-order-customer-details awb-woo-order-customer-details--1 fusion-no-small-visibility" style="--awb-separator-style:solid;--awb-separator-height:1px;">
<section class="awb-woo-order-customer-details__cols">
<div class="awb-woo-order-customer-details__col awb-woo-order-customer-details__col--1">
<h2 class="awb-woo-order-customer-details__title fusion-responsive-typography-calculated" data-fontsize="44" style="--fontSize: 44; line-height: 1.26;" data-lineheight="55.44px">Fakturační adresa</h2>
<hr class="awb-woo-order-customer-details__sep">
<address class="awb-woo-order-customer-details__address"> Petr Pech <br>Línská 1092/2 <br>330 27 Vejprnice <p class="awb-woo-order-customer-details--phone">+420736166572</p>
<p class="awb-woo-order-customer-details--email">[email protected]</p>
</address>
</div>
<div class="awb-woo-order-customer-details__col awb-woo-order-customer-details__col--2">
<h2 class="awb-woo-order-customer-details__title fusion-responsive-typography-calculated" data-fontsize="44" style="--fontSize: 44; line-height: 1.26;" data-lineheight="55.44px">Doručovací adresa</h2>
<hr class="awb-woo-order-customer-details__sep">
<address class="awb-woo-order-customer-details__address"> Petr Pech <br>Línská 1092/2 <br>330 27 Vejprnice </address>
</div>
</section>
</section>
<section class="awb-woo-order-customer-details awb-woo-order-customer-details--2 fusion-no-medium-visibility fusion-no-large-visibility" style="--awb-separator-style:solid;--awb-separator-height:1px;">
<section class="awb-woo-order-customer-details__cols">
<div class="awb-woo-order-customer-details__col awb-woo-order-customer-details__col--1">
<h3 class="awb-woo-order-customer-details__title fusion-responsive-typography-calculated" data-fontsize="28" style="--fontSize: 28; line-height: 1.32;" data-lineheight="36.96px">Fakturační adresa</h3>
<hr class="awb-woo-order-customer-details__sep">
<address class="awb-woo-order-customer-details__address"> Petr Pech <br>Línská 1092/2 <br>330 27 Vejprnice <p class="awb-woo-order-customer-details--phone">+420736166572</p>
<p class="awb-woo-order-customer-details--email">[email protected]</p>
</address>
</div>
<div class="awb-woo-order-customer-details__col awb-woo-order-customer-details__col--2">
<h3 class="awb-woo-order-customer-details__title fusion-responsive-typography-calculated" data-fontsize="28" style="--fontSize: 28; line-height: 1.32;" data-lineheight="36.96px">Doručovací adresa</h3>
<hr class="awb-woo-order-customer-details__sep">
<address class="awb-woo-order-customer-details__address"> Petr Pech <br>Línská 1092/2 <br>330 27 Vejprnice </address>
</div>
</section>
</section>
</div>
</div>
<div class="fusion-layout-column fusion_builder_column fusion-builder-column-15 fusion_builder_column_1_1 1_1 fusion-flex-column" style="--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;">
<div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column">
<div class="fusion-separator fusion-full-width-sep" style="align-self: center;margin-left: auto;margin-right: auto;margin-top:45px;margin-bottom:30px;width:100%;">
<div class="fusion-separator-border sep-single sep-solid" style="--awb-height:20px;--awb-amount:20px;--awb-sep-color:rgba(101,106,112,0.33);border-color:rgba(101,106,112,0.33);border-top-width:1px;"></div>
</div>
<div class="fusion-title title fusion-title-10 fusion-no-small-visibility fusion-sep-none fusion-title-text fusion-title-size-two" style="--awb-margin-bottom:35px;">
<h2 class="fusion-title-heading title-heading-left fusion-responsive-typography-calculated" style="margin:0;--fontSize:44;line-height:1.26;">Obsah objednávky</h2>
</div>
<div class="fusion-title title fusion-title-11 fusion-no-medium-visibility fusion-no-large-visibility fusion-sep-none fusion-title-text fusion-title-size-three" style="--awb-margin-bottom:35px;">
<h3 class="fusion-title-heading title-heading-left fusion-responsive-typography-calculated" style="margin:0;--fontSize:28;line-height:1.32;">Obsah objednávky</h3>
</div>
<section class="awb-woo-order-table awb-woo-order-table--1" style="--awb-border-s:solid;--awb-border-w:1px;">
<div class="avada-order-details">
<table class="shop_table order_details">
<thead>
<tr>
<th class="product-name">Produkt</th>
<th class="product-total">Cena celkem</th>
</tr>
</thead>
<tbody>
<tr class="awb-woo-order-table__order-item order_item">
<td class="product-name">
<div class="fusion-product-name-wrapper">
<span class="product-thumbnail">
<a href="https://svetvramu.cz/obchod/pamatky/colosseum/?attribute_pa_velikost=14x14">
<img decoding="async" width="500" height="500" src="https://svetvramu.cz/wp-content/uploads/2024/01/dario-veronesi-lUO-BjCiZEA-unsplash-500x500.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" srcset="https://svetvramu.cz/wp-content/uploads/2024/01/dario-veronesi-lUO-BjCiZEA-unsplash-66x66.jpg 66w, https://svetvramu.cz/wp-content/uploads/2024/01/dario-veronesi-lUO-BjCiZEA-unsplash-100x100.jpg 100w, https://svetvramu.cz/wp-content/uploads/2024/01/dario-veronesi-lUO-BjCiZEA-unsplash-150x150.jpg 150w, https://svetvramu.cz/wp-content/uploads/2024/01/dario-veronesi-lUO-BjCiZEA-unsplash-200x200.jpg 200w, https://svetvramu.cz/wp-content/uploads/2024/01/dario-veronesi-lUO-BjCiZEA-unsplash-300x300.jpg 300w, https://svetvramu.cz/wp-content/uploads/2024/01/dario-veronesi-lUO-BjCiZEA-unsplash-400x400.jpg 400w, https://svetvramu.cz/wp-content/uploads/2024/01/dario-veronesi-lUO-BjCiZEA-unsplash-500x500.jpg 500w, https://svetvramu.cz/wp-content/uploads/2024/01/dario-veronesi-lUO-BjCiZEA-unsplash-600x600.jpg 600w, https://svetvramu.cz/wp-content/uploads/2024/01/dario-veronesi-lUO-BjCiZEA-unsplash-700x700.jpg 700w, https://svetvramu.cz/wp-content/uploads/2024/01/dario-veronesi-lUO-BjCiZEA-unsplash-768x768.jpg 768w, https://svetvramu.cz/wp-content/uploads/2024/01/dario-veronesi-lUO-BjCiZEA-unsplash-800x800.jpg 800w, https://svetvramu.cz/wp-content/uploads/2024/01/dario-veronesi-lUO-BjCiZEA-unsplash-1024x1024.jpg 1024w, https://svetvramu.cz/wp-content/uploads/2024/01/dario-veronesi-lUO-BjCiZEA-unsplash-1200x1200.jpg 1200w, https://svetvramu.cz/wp-content/uploads/2024/01/dario-veronesi-lUO-BjCiZEA-unsplash-1536x1536.jpg 1536w" sizes="(max-width: 500px) 100vw, 500px">
</a>
</span>
<div class="product-info">
<a href="https://svetvramu.cz/obchod/pamatky/colosseum/?attribute_pa_velikost=14x14">COLOSSEUM - 14 x 14 cm</a>
<strong class="product-quantity">× 1</strong>
<ul class="wc-item-meta">
<li>
<strong class="wc-item-meta-label">Velikost:</strong>
<p>14 x 14 cm</p>
</li>
</ul>
</div>
</div>
</td>
<td class="product-total">
<span class="woocommerce-Price-amount amount">
<bdi>990,00 <span class="woocommerce-Price-currencySymbol">Kč</span>
</bdi>
</span>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Mezisoučet:</th>
<td class="product-total">
<span class="woocommerce-Price-amount amount">
<bdi>990,00 <span class="woocommerce-Price-currencySymbol">Kč</span>
</bdi>
</span>
</td>
</tr>
<tr>
<th scope="row">Doprava:</th>
<td class="product-total">
<span class="woocommerce-Price-amount amount">
<bdi>119,00 <span class="woocommerce-Price-currencySymbol">Kč</span>
</bdi>
</span> <small class="shipped_via">prostřednictvím Zásilkovna | Domů</small>
</td>
</tr>
<tr>
<th scope="row">Platební metoda:</th>
<td class="product-total">Bankovním převodem</td>
</tr>
<tr>
<th scope="row">Cena celkem:</th>
<td class="product-total awb-woo-order-table__total">
<span class="woocommerce-Price-amount amount">
<bdi>1109,00 <span class="woocommerce-Price-currencySymbol">Kč</span>
</bdi>
</span>
</td>
</tr>
</tfoot>
</table>
</div>
</section>
<div class="fusion-separator fusion-full-width-sep" style="align-self: center;margin-left: auto;margin-right: auto;margin-top:20px;margin-bottom:45px;width:100%;">
<div class="fusion-separator-border sep-single sep-solid" style="--awb-height:20px;--awb-amount:20px;--awb-sep-color:rgba(101,106,112,0.33);border-color:rgba(101,106,112,0.33);border-top-width:1px;"></div>
</div>
<div class="fusion-text fusion-text-3">
<p>Máte k objednávce nějaký dotaz? <a href="https://svetvramu.cz/kontakt/">Kontaktujte nás</a>. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
2
Answers
I am attaching the current HTML output of the page in the screenshot but it is automatically generated by the template. Maybe it can be done by editing of the /includes/gateways/bacs/class-wc-gateway-bacs.php file you mentioned.
You can try this plugin "Thank You Page Customizer for WooCommerce"