-1

I'm learning WP, please be gentle as I'm a n00b!

The website is xtraicehome.com. They sell synchetic ice for hockey training. The previous webmaster developed a Woocommerce product that executes a JS script to calculate de number of panels to be added to the cart depending on the customer's input.

Now they need to change the manufacturing process and the panels are going to have different size (and shape, they'll be square) so I need to edit the code of the ConfigurICER.

If I access through FTP I see the .js and .css files in the child theme folder. In WP everything is presented through a Woocommerce product linked to a WP page template and both the product and the page share he same permalink.

Product Page

Well, I can't seem to find where the hell does WP call the .JS functions. It's not in functions.php, it's not an extra css class, I have no idea how I could say create copy of the product and start editing the .js code so I could have both products working at the same time. I don't even know where to edit these texts!

enter image description here

I know this is all very abstract but I have no idea how to present the question in any other way. Maybe I'm missing some very basic knowledge and I look very stupid at the moment.

All help is appreciated.

EDIT: More info after PROGOSTECH's response.

If i check the page source I see the files that I found in the child theme through FTP. Still I can't find where in the page template or product are the pointers to those files. Plus, I can't even edit the simplest thing which is the texts I was talking about in the previous image, where are those!?

Source

Product code:

[vc_row unlock_row="" row_height_percent="0" back_image="18108" back_repeat="repeat-x" overlay_alpha="50" gutter_size="3" shift_y="0"][vc_column][dhvc_woo_product_page_add_to_cart el_class=""][/vc_column][/vc_row]

Page template code:

[vc_row unlock_row="" row_height_percent="0" back_image="18108" back_repeat="repeat-x" overlay_alpha="50" gutter_size="3" shift_y="0"][vc_column][dhvc_woo_product_page_add_to_cart el_class=""][/vc_column][/vc_row][vc_row][vc_column width="1/1"][vc_empty_space empty_h="3"][vc_empty_space empty_h="3"][vc_column_text]The ConfigurIcer tool is designed to make it easy to choose the size of your Xtraice Home Synthetic Ice surface for hockey training.  Just plug in the measurements of the space where you'd like to put the surface and the ConfigurIcer will literally configure the surface for you so that you know how many panels can fit and in which direction.[/vc_column_text][vc_empty_space empty_h="3"][/vc_column][/vc_row]

EDIT 2:

I have managed to begin to understand what the hell the previous developer did. Every tutorial I found says you have to use wp_enqueue_script() and wp_enqueue_style().

After searching everywhere in the site files and admin menu and going over everything over and over for hours, I realized something: the standard shortcode for the add_to_cart function wasn’t being used, but [dhvc_woo_product_page_add_to_cart el_class=””] instead.

I started typing dhvc in Google and the autofill led me to the existence of this plugin https://codecanyon.net/item/woocommerce-products-layouts/7384574

Investigating the plugin folder in depth I’ve found the texts (hardcoded in wp-content/plugins/dhvc-woocommerce-page/includes/shortcode.php) that I couldn’t find editing the product or the template. For some reason windows search doesn’t index .php contents and that’s why I couldn’t find the string “Welcome to the Configuricer” in the WordPress files, whereas other strings and classes contained in .css and .js files were easy to find. Now I’ve learned something new: need to go to windows indexing options and select “index contents” for several common extensions I work with.

Now, I’m not an expert but adding HTML code in the function in the plugin files doesn’t strike me as best practices, please correct me if I’m wrong.

public function dhvc_woo_product_page_add_to_cart_shortcode($atts, $content = null) {

    extract ( $this->_shortcode_atts ( array (

            'el_class' => '' 

    ), $atts ) );

    ob_start ();

    if (! empty ( $el_class ))

        echo '<div class="' . $el_class . '">';


?>
<link rel="stylesheet" href="https://xtraicehome.com/web/wp-content/themes/xtraice-child/bootstrap-spinner.css">
<link rel="stylesheet" type="text/css" href="https://xtraicehome.com/web/wp-content/themes/xtraice-child/styleconfigurator.css">

<script language="javascript" src="https://xtraicehome.com/web/wp-content/themes/xtraice-child/jsconfigurator.js"></script>
<script src="https://xtraicehome.com/web/wp-content/themes/xtraice-child/jquery.spinner.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.min.js"></script>



<div class="printArea"  id="printArea">
    <h2 class="tittleConfiguraicer">Welcome to the ConfigurIcer</h2>
    <p class="textConfiguricer">Insert measurements or get one of our packs</p>
    <div class="panelControl">
            <div class="tittleMeasurement" onClick="ocPanel();">
                Insert measurements
                <span>+</span>
            </div>
            <div id="dataPanel">
                <div>
                    <span class="tittle">LENGTH</span>
                    <div class="input-group spinner" data-trigger="spinner">
                        <div class="input-group-addon">
                            <a href="javascript:;" class="spin-down arrowLeftBlock" data-spin="down" onClick="updatePanels();"><spam class="arrowLeft"></spam></a>
                            <input type="text" name="height" id="height" value="0" data-rule="quantity" class="foots" onChange="updatePanels();" tabindex="10">
                            <a href="javascript:;" class="spin-up arrowRightBlock" data-spin="up" onClick="updatePanels();" ><spam class="arrowRight"></spam></a>
                        </div>
                    </div>
                    <span class="info">'</span> 

                    <div class="input-group spinner" data-trigger="spinner">
                        <div class="input-group-addon">
                            <a href="javascript:;" class="spin-down arrowLeftBlock" data-spin="down" onClick="updatePanels();"><spam class="arrowLeft"></spam></a>
                            <input type="text" name="heightin" id="heightin" value="0" data-rule="quantity2" class="inches" onChange="updatePanels();" tabindex="11">
                            <a href="javascript:;" class="spin-up arrowRightBlock" data-spin="up" onClick="updatePanels();"><spam class="arrowRight"></spam></a>
                        </div>
                    </div>
                    <span class="info">"</span>
                </div>
                <div class="sepConfigurator">
                    <span class="tittle">WIDTH</span>

                    <div class="input-group spinner" data-trigger="spinner">
                        <div class="input-group-addon">
                            <a href="javascript:;" class="spin-down arrowLeftBlock" data-spin="down" onClick="updatePanels();"><spam class="arrowLeft"></spam></a>
                            <input type="text" name="width" id="width" value="0" data-rule="quantity" class="foots" onChange="updatePanels();" tabindex="12">
                            <a href="javascript:;" class="spin-up arrowRightBlock" data-spin="up" onClick="updatePanels();"><spam class="arrowRight"></spam></a>
                        </div>
                    </div>
                    <span class="info">'</span>

                    <div class="input-group spinner" data-trigger="spinner">
                        <div class="input-group-addon">
                            <a href="javascript:;" class="spin-down arrowLeftBlock" data-spin="down" onClick="updatePanels();"><spam class="arrowLeft"></spam></a>
                            <input type="text" name="widthin" id="widthin" value="0"  data-rule="quantity2" class="inches" onChange="updatePanels();" tabindex="13">
                            <a href="javascript:;" class="spin-up arrowRightBlock" data-spin="up" onClick="updatePanels();"><spam class="arrowRight"></spam></a>
                        </div>
                    </div>
                    <span class="info">"</span> 
                </div>
                <div>
                    <span class="tittle">PANELS NEEDED</span> <input type="text" name="totalPanels" id="showPanell" value="0" disabled class="totalPanels">
                </div>

            </div>


            <div id="<?php echo esc_attr($uniq_id); ?>" class="dfd-single-product-module woocommerce dfd-<?php echo esc_attr($product_style); ?> <?php echo esc_attr($el_class); ?> <?php echo esc_attr($animate); ?>" style="<?php echo $module_css;?>" <?php echo $animation_data; ?>>
    <?php
        woocommerce_template_single_add_to_cart ();
    ?>
</div>



        </div>
        <div class="panelBoton" id="panelBoton">
            <div class="boton" id="botonIndoor" onClick="changeIndoor();">
                <div onClick="changeIndoor();">INDOOR</div>
                <div onClick="changeIndoor();">OUTDOOR</div>
            </div>
        </div>


    <div id="wrapper" class="wrapper">
        <div class="gridbacktexture transition" id="gridbacktexture"></div>
          <div class="gridPosition transition" id="gridPosition">
            <div class="gridback transition" id="gridback">
                <div id="reglaW" class="reglaW">
                    <div id="rwPanel" class="no-span"><span id="rwPanelText" >xxx"</span></div>
                </div>
                <div id="reglaH" class="reglaH ">
                    <div id="rhPanel" class="no-span"><div id="rhPanelText" >xxx"</div></div>
                </div>
                  <div id="grid" class="grid transition" >

                  </div>
          </div>
        </div>
        <div class="clear"></div>
    </div>
</div>​


</div>




<?php if(!empty($css_js)) : ?>
<script type="text/javascript">
    (function($) {
        "use strict";
        $('head').append('<?php echo $css_js; ?>');
    })(jQuery);
</script>
<?php endif; ?>

        echo '</div>';

    return ob_get_clean ();

}

So now I can edit the code. The thing is I want to keep both products at the same time in the store. The old version will be kept available for US visitors(until the stock is sold out) and the new panels calculator will be showed only to Canadian visitors.

I'm guessing I need a condition with geolocation there so that different .js and .css files are loaded in the product view. Will start investigating this.

Any advice is greatly welcome!

closed as off-topic by Mark Kaplun, Jacob Peattie, TheDeadMedic, fuxia Aug 30 '18 at 7:38

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

1

The solution is simple. Look for the JS file in the page source. Once you get to the file, search it for any related ID or CLASS used in the page template and edit it.

Hope it clarifies your confusions and helps you make needed edits.

Happy coding!

Not the answer you're looking for? Browse other questions tagged or ask your own question.