How can I edit the final HTML structure of the whole web page

Question

I am creating an online shop web page and I am using the "Almaira Shop" theme.

This theme lets me put a page template that haves a lot of customizable sections that I can edit with the "customize" tool. One of its sections is called Product Filter. It is basically a preview of the shop that shows the categories. It looks like this:

The thing is that I want to change the order of the "Clothing, Other, Sneakers", which is by default on alphabetic order. I cannot change it with the customize tool, so I looked for the file, to edit it, but when I go into the file, it says this code

<?php
if( shortcode_exists( 'almaira-shop' ) ){
do_shortcode("[almaira-shop section='almaira_shop_show_frontpage']");
}
?>

I'm guessing that it is a shortcode from some file, but I can't find it. I did the thing when you press F12 or Ctrl + Shift + I, and the HTML code of the webpage appears like this:

And I managed to change it (Just changing the "Sneakers" at the top of the section, so it would appear first), but when you refresh the web page, the changes disappear because you are only changing it locally. So I was wondering if there would be a way to edit the final HTML structure of the web page so I can change the order with just putting the at the top. :)

Answer 1

This theme has a companion plugin called hunk-companion.

I ssh'd to my server and did grep -iRl "almaira_shop_show_frontpage" inside the wp-content folder and it returned this:

plugins/hunk-companion/almaira-shop/almaira-shop-admin/almaira_shop_shortcode.php

I found that in plugins/hunk-companion/almaira-shop/almaira-shop-frontpage you have all the sections' .php files.

You can now copy the code you need into your own page template file to create your custom frontpage in your child theme (that's what I'm about to do!).

Good Luck!